I am looking to utilize ajax calls in conjunction with vue.js to dynamically populate the options for a drop-down menu. Here's an example of what I currently have:
<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' }
]
}
})
However, instead of hard-coding the options, I want them to be generated from an ajax call.
An example of the ajax call is as follows:
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 contain a list of objects with two properties (ID and Value)
}
});
}
I am new to using vue.js and would greatly appreciate any assistance.