Vuejs : using the same array of data for two different lists of inputs

Question

I have created a fiddle to explain what I want : https://jsfiddle.net/silentway/aro5kq7u/3/ The standalone code is as follows :

This is my main list.

{{q}}

And this is the list of the selected elements in the previous list.

• {{questions[a.id]}}

Here's the answer's array for debugging: {{answers}}

var mainApp = new Vue({ el: '#mainApp', data: { questions: [ "Who are you ?", "Who, who?", "You know my name?", "Look up my number" ], answers: [] } }); I want to display a first list of questions, each with a checkbox. The selected questions are stored in an array called "answers". From these selected answers I then make another list. Each item has a new corresponding checkbox, for a certain property (which can be true or false). I would like this associated property to be stored in the same array ("answers") as the results from the input in the first list. What happens with my code is that checking a box in the second list does change the shared array of data ("answers"), but in doing so it also unchecks the corresponding answer in the first list. Any help would be much appreciated. JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

I'm having a very hard time following your wording but I gave it a shot anyway. I think you'd be better off keeping selected questions and selected answers in their own array and use a computed property to join them basically. Here's a quick fiddle of it: 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')