从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调用。

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真正的新，我将不胜感激，如果有人可以提供帮助。

Answer 1

在下面的例子中，我模仿你的Ajax调用与setTimeout。基本上你想要在变量中捕获new Vue()的结果，然后用你的ajax调用的结果设置该Vue的options属性。

我还更新了您的模板，以反映您返回的选项具有结构{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...); 

，然后阿贾克斯小心的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 
      } 
    }); 
}