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

by

0👍

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

Leave a comment