想象一个带有 Vuex 的 Vuejs 应用程序。我想要一个多选下拉菜单。Vue 组件中的基本示例:
<template>
<div>
<multiselect
v-model="values"
:options="options">
</multiselect>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
export default {
components: { Multiselect },
data () {
return {
values: null,
options: ['bar', 'foo', 'hello','test']
}
}
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
现在,如果我在这样的数据中初始化“值”:
values: ["test"]
多选下拉菜单已将“测试”作为已选择的选项。我也可以在单击时取消选择它并再次选择它,因为它在选项中。
如果我尝试像这样初始化我的值:
values:[this.$store.state.variableIwantPreselected]
它不能完全工作。在选择区域/下拉搜索字段中,通常会显示带有所选项目名称的绿色框。对我来说,它不会在绿色框中显示字符串,它位于 this.$store.state.variableIwantPreselected中,而只是一个没有任何内容的绿色小框。
我想我错过了一些关于 Vuex 和生命周期钩子的东西,但我不知道是什么。