我在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 回答
原因值未显示在root中是因为数据与下拉组件隔离 . 要使组件中的数据显示在Root中,您需要使用props .
有关详细说明,请参阅此问题
How to get data from a component in VueJS