ajaxコールからVue.jsのドロップダウンを入力してください

Question

私はajaxコールを作成し、返された結果を使用してvue.jsを使用してドロップダウンのオプションを生成したいと考えています。 私はこれを行うことができます。

<select v-model="selected"> 
    <option v-for="option in options" v-bind:value="option.value"> 
    {{ option.text }} 
    </option> 
</select> 
<span>Selected: {{ selected }}</span> 

の.jsは

new Vue({ 
    el: '...', 
    data: { 
    selected: 'A', 
    options: [ 
     { text: 'One', value: 'A' }, 
     { text: 'Two', value: 'B' }, 
     { text: 'Three', value: 'C' } 
    ] 
    } 
}) 

ファイルしかし、私は私のオプションは、ハードコーディングされたが、代わりにAJAX呼び出しから来ているしたくありません。

function pullEmployees(){ 
     var eventOwnerId = $('#eventOwner').val(); 
     var eventOwnerName = $('#eventOwner :selected').text(); 
     $.ajax({ 
      url: "employees.cfm", 
      data: { 
       eventOwnerId: eventOwnerId, 
       eventOwnerName: eventOwnerName, 
       method : "updateOwners" 
      }, 

      success: function(results) { 
       // results will have a list of objects where each objects has  two properties (ID and Value) 
      } 
    }); 
} 

私はvue.jsで本当に新しいですし、誰かが助けることができる場合、私は感謝：

Ajax呼び出しは次のようになります。

Answer 1

以下の例では、私はあなたのAJAX呼び出しをシミュレートしていますsetTimeoutである。基本的には、new Vue()の結果を変数に取り込み、そのVueのoptionsプロパティをajax呼び出しの結果で設定したいとします。

また、返すオプションが構造{ID, text}であることを反映するようにテンプレートを更新しました。

console.clear() 
 

 
let app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    selected: 'A', 
 
    options: [] 
 
    } 
 
}) 
 

 

 
function pullEmployees(){ 
 
    let options = [ 
 
    { text: 'One', ID: 'A' }, 
 
    { text: 'Two', ID: 'B' }, 
 
    { text: 'Three', ID: 'C' } 
 
    ]; 
 
    setTimeout(() => app.options = options, 1000) 
 
} 
 
pullEmployees()

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div id="app"> 
 
    <select v-model="selected"> 
 
    <option v-for="option in options" v-bind:value="option.ID"> 
 
     {{ option.text }} 
 
    </option> 
 
    </select> 
 
    <span>Selected: {{ selected }}</span> 
 
</div>

しかし、このすべては、Vueの内部で行うことができます。それは外で行う必要はありません。

let app = new Vue({ 
    el: '#app', 
    data: { 
    selected: 'A', 
    options: [] 
    }, 
    methods:{ 
    pullEmployees(){ 
     var eventOwnerId = $('#eventOwner').val(); 
     var eventOwnerName = $('#eventOwner :selected').text(); 
     $.ajax({ 
     url: "employees.cfm", 
     data: { 
      eventOwnerId: eventOwnerId, 
      eventOwnerName: eventOwnerName, 
      method : "updateOwners" 
     }, 
     success: results => this.options = results 
     }); 
    } 
    }, 
    mounted(){ 
    this.pullEmployees() 
    } 
}) 

eventOwnerの場合も同様に、あなただけのVueからデータプロパティとしてその値を得ることができるのVueの一部です。

Answer 2

ストアあなたVUEインスタンス変数として：

var vue = new Vue(// stuff...); 

、その後、Ajaxはthisの範囲については注意してください：

function pullEmployees(){ 
     var _this = this; // bind "this" to local var 
     var eventOwnerId = $('#eventOwner').val(); 
     var eventOwnerName = $('#eventOwner :selected').text(); 
     $.ajax({ 
      url: "employees.cfm", 
      data: { 
       eventOwnerId: eventOwnerId, 
       eventOwnerName: eventOwnerName, 
       method : "updateOwners" 
      }, 

      success: function(results) { 
       _this.vue.data.options = results; // set data 
      } 
    }); 
}