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

【问题标题】：Vue Multiselect does not update {{ value }} via v-modelVue Multiselect 不会通过 v-model 更新 {{ value }}
【发布时间】：2017-03-08 02:21:25
【问题描述】：

我在 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 的值。

【问题讨论】：

标签： vue.js laravel-5.3 vuejs2

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

详细解释请看这个问题

How to get data from a component in VueJS

【讨论】：