I am currently working with vue multiselect and I want to populate my options from an api source. When I follow the example in the official documentation, it works perfectly.
import Multiselect from 'vue-multiselect'
export default {
components: {
Multiselect
},
data () {
return {
value: [
{ name: 'Vue.js', language: 'JavaScript' }
],
options: [
{ name: 'Vue.js', language: 'JavaScript' },
{ name: 'Adonis', language: 'JavaScript' },
{ name: 'Rails', language: 'Ruby' },
{ name: 'Sinatra', language: 'Ruby' },
{ name: 'Laravel', language: 'PHP' },
{ name: 'Phoenix', language: 'Elixir' }
]
}
}
}
However, when I try to replace the hardcoded options with my dynamic data, it fails to work as expected
data: function () {
return {
value: [],
options: this.users
}
},
methods: {
getUsers: function () {
this.$http.get('/api/get/users').then(function (response) {
this.users = response.data;
this.updateUsers();
console.log(this.users)
}, function (response) {
console.log(response)
});
},
updateUsers: function () {
this.options = this.users;
}
},
created: function () {
this.getUsers();
}
};
I have attempted calling the method using mounted, beforeMount, and beforeCreate but none of them seem to resolve the issue. The console displays the following errors:
https://i.sstatic.net/jKVJS.png
I suspect the problem lies in how I am passing the options, however, I am unsure on the correct way to do so.
For the template, I am simply sticking to the default layout for now:
<div>
<label class="typo__label">Simple select / dropdown</label>
<multiselect v-model="value" :options="options" :multiple="true" :close-on-select="false" :clear-on-select="false" :hide-selected="true" placeholder="Pick some" label="name" track-by="name"></multiselect>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>