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>

NB 官方示例使用选择而不是值，但这也不起作用。根据文档选择被V2替换为值。

Answer 1

原因值未显示在root中是因为数据与下拉组件隔离。要使组件中的数据显示在Root中，您需要使用props。

有关详细说明，请参阅此问题

How to get data from a component in VueJS

Answer 2

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

如果该属性为可选，则可以正常编译，但是子组件无法正确更新。

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

2 个答案: