Vue Multiselect 不会通过 v-model 更新 {{ value }}

Question

我在 Laravel 5.3 中将此示例用于 Vue Multiselect“^2.0.0-beta.14”。 https://github.com/monterail/vue-multiselect/tree/2.0#install--basic-usage

插件正确呈现，但我无法通过 v-model 获得选择。我期待 @{{ selected }} 更新当前选择。

app.js

Vue.component('dropdown', require('./components/Multiselect.vue'));

VUE JS

<template>
 <div>
   <multiselect
     v-model="value"
     :options="options">
   </multiselect>
 </div>
</template>

<script>
  import Multiselect from 'vue-multiselect'
  export default {
    components: { Multiselect },
    data () {
      return {
        value: null,
        options: ['list', 'of', 'options']
      }
    }
  }
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

HTML

<div id="app">
  <h3>Dropdown</h3>
  <div>
    <label class="typo__label">Single select</label>
    <dropdown></dropdown>
    <pre class="language-json"><code>@{{ value  }}</code></pre>
  </div>
</div>

注意官方的例子用的是selected而不是value，但这也不管用。根据文档选择被替换为 V2 的值。

Answer 1

值未显示在根目录中的原因是数据与下拉组件隔离。要从组件中获取数据以显示在 Root 中，您需要使用 props。

详细解释请看这个问题

Answer 2

如果您在 Vue.js 2.0 中使用 TypeScript 接口，请避免使用可选属性来存储子组件的值。即，如果您的属性是 value:? IMyCustomInterface 而不是使用 value: MyCustomObject|null 并在构造函数中将对象设置为 null。

如果属性是可选的，它可以正常编译，但子组件不会正确更新它。

Vue Multiselect 不会通过 v-model 更新 {{ value }}

Vue Multiselect does not update {{ value }} via v-model

vue.js

laravel-5.3

vuejs2