Laravel 5.3 & vuejs 片段实例问题答案

【问题标题】：Laravel 5.3 & vuejs fragment instance issueLaravel 5.3 & vuejs 片段实例问题
【发布时间】：2017-06-06 18:11:37
【问题描述】：

我正在运行一个 Laravel 5.3 应用程序，它通过 webpack 开箱即用地支持 VueJS。我在使用 vue-multiselect 时遇到问题，它显示：

[Vue warn]: Attribute "v-model" is ignored on component <multi-select> because the component is a fragment instance:

我正在使用 vue-multiselect 文档中提供的一个基本示例，我最终将使用它在表单中显示国家/地区，因此是组件的名称。我试过寻找解决方案，但 Laravel 5.3 似乎没有人遇到这个问题。我已经尝试了 Laravel 附带的示例组件，它运行良好。

app.js：

Vue.component('country', require('./components/country-select.vue'));;

new Vue({
    el: 'body'
});

国家选择.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>

刀片文件：

<country :options="options"
    :selected.sync="selected"
    :show-label="false">
    </country>

【问题讨论】：

尝试将div.dropdown包装到一个父div中，所以结构应该是template>div>div.dropdown>multi-select
没有区别。

标签： laravel vue.js vue-component

【解决方案1】：

通过升级到 Vue 2 解决了这个问题。

【讨论】：