Vueデータをドロップダウンにバインドする方法

私はVueを学習しており、ここで間違ったことを伝えることはできません。データはサーバから返されていますが（5レコード）、<select>に入れられません。私が得るすべては{{dept.DName}}Vueデータをドロップダウンにバインドする方法

<html> 
<head><link href="Content/bootstrap.min.css" rel="stylesheet" /> 
    <meta charset="utf-8" /> 
    <title></title> 
</head> 
<body class="container"> 
<div> 
    <select id="deptList"> 
     <option v-model="selected" v-for="dept in app.depts" v-bind:value="dept.Did"> 
      {{dept.DName}} 
     </option> 
    </select>  
</div> 
<script src="Scripts/jquery-1.9.1.min.js"></script> 
<script src="Scripts/moment.min.js"></script> 
<script src="https://unpkg.com/vue"></script> 
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> 
<script src="Scripts/vue-controller.js"></script> 
<script src="Scripts/bootstrap.min.js"></script> 
</body> 
</html>

スクリプト/ VUE-controller.jsを言う1つのオプションが含まれています

var app = new Vue({ 
    data: { 
     el: "body", 
     depts: [], 
     emps: [], 
     selected: "" 
    }, 
    methods: { 
     getDepts: function() { 
      console.log("I'm a little teapot"); // this appears in the log 
      this.$http.get("/Dept/Index").then(function(response) { 
       this.depts = response.data; 
       console.log(this.depts); //the expected data does appear in the log 
       }, 
       function(error) { 
        console.log(error.statusText); 
       }); 
     } 
    }, 
    created: function() {   
     this.getDepts(); 
    } 
})

私はC＃の開発者ですので、私は私がこれをめちゃくちゃにしています途中確信しています/そのコンテキストのものは、何が起こっているのか把握することができませんでした。

出典

2017-12-04 davecove

いくつかの問題があります。

elは、データプロパティではなく、Vue定義オブジェクトのルートプロパティです。
あなたはになりません。にバインドbodyにバインドしてください。実際、Vueはそれを防ぐでしょう。体の内容の適切な要素にバインドします。
v-modelを選択してください。
app.deptsは必要ありません。すべてのデータプロパティは、テンプレート内の名前で参照できます。

console.clear() 
 

 
const departments = [ 
 
    {Did: 1, DName: "Department 1"}, 
 
    {Did: 2, DName: "Department 2"}, 
 
    {Did: 3, DName: "Department 3"}, 
 
] 
 

 
var app = new Vue({ 
 
    el: "#app", 
 

 
    data: { 
 
    depts: [], 
 
    emps: [], 
 
    selected: "" 
 
    }, 
 
    methods: { 
 
    getDepts: function() { 
 
     console.log("I'm a little teapot"); // this appears in the log 
 
     this.$http.post("https://httpbin.org/post", departments).then(function(response) { 
 
     this.depts = response.body.json; 
 
     }, 
 
     function(error) { 
 
     console.log(error.statusText); 
 
     }); 
 
    } 
 
    }, 
 
    created: function() {   
 
    this.getDepts(); 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.js"></script> 
 
<div id="app"> 
 
     <select v-model="selected" id="deptList"> 
 
     <option v-for="dept in depts" v-bind:value="dept.Did"> 
 
      {{dept.DName}} 
 
     </option> 
 
    </select> 
 
    <hr> 
 
    Selected Department: {{selected}} 
 
</div>

注：それはこの環境で動作しますように、私はAJAX呼び出しを修正。あなたがVueResourceを使用していると仮定すると、ajax部分のコードはうまくいきました。

出典

2017-12-04 17:46:05 Bert

テンプレート内の変数のスコープが自動的に「app」になるため、「app」を削除する必要があります。あなたのテンプレートから、それはそうです

<select id="deptList" v-model="selected"> 
    <option v-for="dept in depts" v-bind:value="dept.Did"> 
    {{dept.DName}} 
    </option> 
</select>

出典

2017-12-04 17:24:38

私の悪い、私はちょうどOPからそれをコピーしました。 v-modelは 'に移動しました。それが正しいに近いですが、結果は同じです。 – davecove

'el'に関するエラーも修正しましたか？ 'data'から設定オブジェクトのルートに移動し、本体の代わりに' #app'のようなものに設定しますか？ –

Vueデータをドロップダウンにバインドする方法

答えて

関連する問題