從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

在下面的示例中，我使用setTimeout模擬您的ajax調用。 基本上你想要在變量中捕獲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
            }
    });
}