首页 文章

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

提问于
浏览
0

我在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 官方示例使用 selected 而不是值,但这也不起作用 . 根据文档选择被V2替换为值 .

1 回答

  • 0

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

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

    How to get data from a component in VueJS

相关问题