我对Vue很陌生。
我有一个组件,里面有一个多选组件,我传递一个值给我的组件,然后传递那个值给多选,大多数时候我看不到那个值,但是有时候,当我保存代码,npm重新运行代码的时候,我可以看到结果,但是很少见。
下面是我的组件的模板部件:
<template>
<div>
<multiselect
:value="defaultValue"
v-model="value"
...
</multiselect>
</div>
</template>
脚本部分:
props: [some other things, "defaultValue"],
data() {
return {
value: this.defaultValue,
}
},
我把这个 prop 像这样传递:
<MyComponent other things... :defaultValue="station"/>
这是目前的情况:
这就是我加载页面时希望看到的内容:
我有什么问题?
编辑:顺便说一句,当我把v-model ="defaultValue"传递给我的多选时,它工作了,但这样我就不能改变值了,因为据我所知, prop 在Vue中是不可变的。
2条答案
按热度按时间7z5jn7bk1#
需要在组件中给
defaultvalue
一个默认值,具体有两种方式:可以使用父组件传递非空值。
或
使用watch方法监视您的
defaultvalue
,当它为空时,为defaultvalue
指定默认值。父组件:
子组件:
一个二个一个一个
r6l8ljro2#
不要同时绑定
v-model
和:value
他们都试图控制同一个基本特征。
调试
我明白你的意思,仅仅使用v模型是行不通的。
更改代码以显示一些调试信息:
这一点之所以重要,是因为我们目前还不知道在
this.defaultValue
中将什么值输入到这个组件中。我们可以看到:
但是我们不知道你的父组件中变量
this.station
的值是什么,它可能不是多选的可能值之一。调试步骤将帮助解决这个问题。