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 :

<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>

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.

I guess you're not storing the value of the checkbox in your first list of array. If you store checkbox value inside of an array, then it will definitely show. — Varit J Patel, Mar 22 '19 at 15:11
This question is kind of tough to follow. Do you basically want them to keep another stack of questions checked along side the first one? — Bill Criswell, Mar 22 '19 at 15:21

Bill Criswell · Answer 1 · 2019-03-22T15:36:31.270

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')

Hi, thanks for your reply. I would like to have the two levels (what you call selected Questions and selected Answers) stored in the same array. With your "selected Answers" being a yes/no property of each selected question. — GuitarExtended, Mar 25 '19 at 08:03
I'm having a hard time following. Think this is what you want: https://jsfiddle.net/crswll/d8e1g750/25/ — Bill Criswell, Mar 25 '19 at 13:04

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

1 Answers1