我创建了一个小提琴来解释我想要的东西:https://jsfiddle.net/silentway/aro5kq7u/3/
独立代码如下:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="mainApp" class="container-fluid">
<p>This is my main list.</p>
<div class="main-list" v-for="(q, index) in questions">
<input type="checkbox"
v-bind:id="'question-' + index"
v-bind:value="{id: index, property: false}"
v-model="answers">
<label v-bind:for="q">{{q}}</label>
</div>
<p>And this is the list of the selected elements in the previous list.</p>
<ul class="selected-list" v-for="(a, index) in answers" :key="a.id">
<li>{{questions[a.id]}} <input type="checkbox"
v-bind:id="'answer-' + index"
v-bind:value="true"
v-model="a.property">
</li>
</ul>
<p>Here's the answer's array for debugging: {{answers}}</p>
</div>
<script>
var mainApp = new Vue({
el: '#mainApp',
data: {
questions: [
"Who are you ?",
"Who, who?",
"You know my name?",
"Look up my number"
],
answers: []
}
});
</script>
我想显示第一个问题列表,每个问题都有一个复选框。所选问题存储在称为“答案”的数组中。 然后从这些选定的答案中列出另一个列表。每个项目都有一个对应于特定属性(可以为true或false)的新复选框。我希望将此关联属性与第一个列表中输入的结果存储在同一数组(“答案”)中。
我的代码发生的事情是,选中第二个列表中的复选框确实会更改共享数据数组(“答案”),但是这样做也会取消选中第一个列表中的相应答案。
任何帮助将不胜感激。
答案 0 :(得分:0)
按照您的措辞我很难受,但无论如何我还是给了机会。我认为您最好将选定的问题和选定的答案保留在它们自己的数组中,并使用计算属性将它们基本加入。这是它的一个小提琴:https://jsfiddle.net/crswll/d8e1g750/21/
new Vue({
data: {
questions: [{
id: 1,
question: 'What the heck 1?'
},
{
id: 2,
question: 'What the heck 2?'
},
{
id: 3,
question: 'What the heck 3?'
},
{
id: 4,
question: 'What the heck 4?'
},
{
id: 5,
question: 'What the heck 5?'
},
],
selectedQuestions: [],
selectedAnswers: [],
},
computed: {
answers() {
return this.selectedQuestions.map(id =>
this.questions.find(question => question.id === id)
)
},
selectedAnswersSimpleList() {
return this.selectedAnswers
.map(id => this.questions.find(question => question.id === id))
.map(question => question.question)
}
},
}).$mount('#app')