Verwenden von Razor in VueJs Komponente

Question

Um zu vermeiden, dass der gleiche Code mehrmals wiederholt wird, verwende ich die VueJs-Komponente, um eine Komponente mit der Auswahlliste zu erstellen. Der Code geht so

Vue.component('select-component', { 
     template: ` 
      <label>elType</label> 
      <div class="col-md-colwidth"> 
      <select> 
       <option value=""></option> 
       @foreach (elType s in ViewBag.elTypes) 
       { 
        <option value="@s[elType+"ID"]">@s["Designation"+elType]</option> 
       } 
      </select> 
      <input type="hidden" v-model="elTarget"> 
      </div> 
      `, 
     props: { 
      elType: { 
       type: String, 
       default: 'User' 
      }, 
      elTarget: { 
       type: String, 
       default: 'user' 
      }, 
      colwidth: { 
       type: int, 
       default: '3'}, 


     } 
    }) 

Wie Sie sehen können, ich erfordern eine Datenliste I aus dem ViewBag gebracht aber alles, was ich bekommen, dass der Rasierer immer ignoriert, dass es sich in einer Vue-Komponente ist und geben "Der Typ oder Namespace-Name 'elType' konnte nicht gefunden werden".

PS: 1) der Eingang Versteckte in dem ursprünglichen Code verwendet, um die bs jQuery Select2

2) zu manipulieren Sie nicht den elTarget und elType dagegen: p es ist eigentlich gleiche Sache, außer ich bin faul camelcase das Wort: p

3) ich habe versucht, das Innere @ wickeln {}, aber immer noch die gleichen Fehler

Answer 1

Sie wechseln nicht Razor ‚innen‘ eine Vue Komponente verwenden, da Razor die Seite Server-Seite erzeugt bevor Vue seine Sachen im Browser erledigen kann. Was Sie dort haben, ist eine Vue-Komponente in einer Razor-Seite. elType ist als Vue-Prop angegeben, also ist es wahrscheinlich nicht in deiner Sichttasche?

In jedem Fall tun Sie das bitte nicht! Verwenden Sie Razor oder Vue. Wenn Sie Vue wählen, sind Ihre vue-Komponenten statische .js- oder .vue-Dateien, Ihre Daten kommen über AJAX-Aufrufe und Sie durchlaufen elTypes mit v-for im Browser. Jeder andere Weg führt zum Wahnsinn :-)