Vue js - 多个组件，每个组件都有不同的初始选定值
Posted
技术标签:
【中文标题】Vue js - 多个组件，每个组件都有不同的初始选定值【英文标题】：Vue js - multiple components with each a different initial selected value 【发布时间】：2020-04-28 17:56:11 【问题描述】：我在 Vue js 中创建了一个多选，但我不明白如何获得组件的多个实例，每个实例具有不同的初始选定值（v-model）。由于父组件上的选定数据，每个组件都获得相同的初始值。我也应该在这里使用道具而不是 v-model 吗？还是应该将数据对象从父级移动到组件本身？
我想要什么
组件一应具有初始选择“ id: "0", text: "One"" 和 组件二应该有初始选择“ id:”1”, text:“Two””
<!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>
【问题讨论】：
【参考方案1】：将索引作为道具传递，您的子组件可以使用该索引来决定默认值。
v-bind:index="0"
v-bind:index="1"
【讨论】：
【参考方案2】：v-model 表示选中的值，注意你同时分配了多选 到同一个变量。
一个可能的解决方案是创建另一个变量，比如说selector2 和selector1
并相应地分配您的 v-model。
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>
【讨论】：
以上是关于Vue js - 多个组件，每个组件都有不同的初始选定值的主要内容，如果未能解决你的问题，请参考以下文章