I'm running a Laravel 5.3 application which supports VueJS out of the box with webpack. I'm having an issue making using vue-multiselect, which displays:
[Vue warn]: Attribute "v-model" is ignored on component <multi-select> because the component is a fragment instance:
I'm using a basic example available in the vue-multiselect documentation, which I will eventually be using to display countries in a form, hence the name of the component. I've tried looking for solutions but nobody with Laravel 5.3 seems to be having this problem. I've tried the example component that ships with Laravel and it works fine.
app.js:
Vue.component('country', require('./components/country-select.vue'));;
new Vue({
el: 'body'
});
country-select.vue:
<template>
<div class="dropdown">
<multi-select v-model="value" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"></multi-select>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect';
export default {
components: {
'multi-select': Multiselect
},
data () {
return {
value: '',
options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched']
}
}
}
</script>
Blade file:
<country :options="options"
:selected.sync="selected"
:show-label="false">
</country>
div.dropdown
into one parent div, so structure should betemplate>div>div.dropdown>multi-select
– Belmin Bedak