Vue js -多个组件，每个组件具有不同的初始值
Vue js -多个组件，每个组件具有不同的初始值
提问于 2020-01-11 07:43:43
我正在Vue js中创建一个multiselect，但我不明白的是，如何通过每个不同的初始选择值(v-model)获得组件的多个实例。由于父组件上选定的数据，每个组件都获得相同的初始值。我也应该在这里使用道具而不是v型吗？还是应该将数据对象从父对象移动到组件本身？
Wat我想要
组件一应该具有初始选择"{ id：“0，文本：”one“}和
组件2应具有初始选择"{ id：“1，文本：”2“}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>
<div id="app">
<multi-select v-model="selected" :options='[{ id: "0", text: "One"}, { id: "1", text: "Two"}'></multi-select>
<multi-select v-model="selected" :options='[{ id: "0", text: "One"}, { id: "1", text: "Two"}'></multi-select>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("multi-select", {
props: ["options", "value"],
template: `
<div>
<div v-for="option in selectedOption">{{ option.text }}</div>
<hr>
<div v-for="option in options">{{ option.text }}</div>
</div>
`,
computed: {
selectedOption() {
return this.value;
}
}
});
new Vue({
el: "#app",
data: {
selected: [{ id: "0", text: "One"}],
}
})
</script>
</body>
</html>回答 2
Stack Overflow用户
发布于 2020-01-11 07:47:02
将索引作为道具传递，您的子组件可以使用此索引来确定默认值。
v-bind:index="0"
v-bind:index="1"Stack Overflow用户
发布于 2020-01-11 09:09:32
v-model是指所选的值，请注意将两个multiselects分配给相同的变量。
一个可能的解决方案是创建另一个变量，比如selector2和selector1
并相应地分配你的v模型。
data: {
selected1: [{ id: "0", text: "One"}],
selected2: [{ id: "1", text: "Two"}],
}以及执行任务
<div id="app">
<multi-select v-model="selected1" :options='[{ id: "0", text: "One"}, { id: "1", text: "Two"}'></multi-select>
<multi-select v-model="selected2" :options='[{ id: "0", text: "One"}, { id: "1", text: "Two"}'></multi-select>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59692581
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号