javascript - Vuejs：对两个不同的输入列表使用相同的数据数组

Question

我创建了一个小提琴来解释我想要什么：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>

我想显示第一个问题列表，每个问题都有一个复选框。选定的问题存储在称为“答案”的数组中。然后我从这些选定的答案中列出另一个列表。每个项目都有一个新的对应复选框，用于某个属性（可以是真或假）。我希望将此关联属性存储在与第一个列表中的输入结果相同的数组（“答案”）中。

我的代码发生的情况是，选中第二个列表中的框确实会更改共享的数据数组（“答案”），但这样做也会取消选中第一个列表中的相应答案。

任何帮助将非常感激。

Answer 1

我很难理解你的措辞，但我还是试了一下。我认为您最好将选定的问题和选定的答案保留在他们自己的数组中，并使用计算属性基本上加入它们。这是一个快速的小提琴：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')