CODEWITHSUNDEEP
javascriptvue.jsvue-component
DoArNa
DoArNa

Reputation: 532

Populate a drop-down in Vue.js from an ajax call

I want to be able to make an ajax call and to use the results returned to generate the options of a drop-down using . I can do this: 

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

.js file

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

But I don't want to have my options hard coded but instead to come from the ajax call.

Ajax call looks something like this:

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)
            }
    });
}

I am really new in and I would appreciate if someone can help.

Upvotes: 13

Views: 20639

Answers (2)

Bert
Bert

Reputation: 82459

In the example below, I am simulating your ajax call with a setTimeout. Basically you want to capture the result of new Vue() in a variable and then set the options property of that Vue with the results of your ajax call.

I also updated your template to reflect that the options you are returning have the structure {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/[email protected]/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>

However all of this can be done inside Vue. It doesn't need to be done outside.

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()
  }
})

If eventOwner is part of the Vue as well you could just get that value as a data property from Vue.

Upvotes: 11

frozen
frozen

Reputation: 2144

Store your vue instance as a variable: 

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

and then for the Ajax be careful about the scope of 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
            }
    });
}

Upvotes: 2

Related Questions