Vue Как объединить два массива из одного объекта?

Question

Я извлекаю данные из API, который дает мне объект элементов, каждый из которых содержит строку с именем correct_answer и массив с именем incorrect_answers.

Я пытаюсь объединить эти значения в каждом элементепоэтому, когда я делаю v-for, он будет перебирать ответы, объединенные в один цикл.Я также хочу рандомизировать порядок этих ответов.

Пример того, как выглядит объект:

"results": [
    {
      "question": "Where was the Games of the XXII Olympiad held?",
      "correct_answer": "Moscow",
      "incorrect_answers": [
        "Barcelona",
        "Tokyo",
        "Los Angeles"
      ]
    },
    {
      "question": "What is the first weapon you acquire in Half-Life?",
      "correct_answer": "A crowbar",
      "incorrect_answers": [
        "A pistol",
        "The H.E.V suit",
        "Your fists"
      ]
    },
]

Answer 1

var res = [
    {
      "question": "Where was the Games of the XXII Olympiad held?",
      "correct_answer": "Moscow",
      "incorrect_answers": [
        "Barcelona",
        "Tokyo",
        "Los Angeles"
      ]
    },
    {
      "question": "What is the first weapon you acquire in Half-Life?",
      "correct_answer": "A crowbar",
      "incorrect_answers": [
        "A pistol",
        "The H.E.V suit",
        "Your fists"
      ]
    },
]

var answers = res.map(i => [i.correct_answer, ...i.incorrect_answers])

console.log(answers[0])
console.log(answers[1])

Answer 2

Вы можете 1️⃣ распространить incorrect_answers в новый массив с correct_answer, а затем 2️⃣ прикрепить результат как новое свойство к исходным данным.Кроме того, 3️⃣ вы можете перемешать ответы, пока вы у него:

const newData = data.map(x => {
  const answers = [x.correct_answer, ...x.incorrect_answers] /*1️⃣*/
  x.answers /*2️⃣*/ = shuffle(answers) /*3️⃣*/
  return x
})

Этот новый массив можно использовать как вычисляемое свойство (например, с именемquestions) в вашем шаблоне:

<fieldset v-for="q in questions" :key="q.question">

const rawData = {
  "results": [
    {
      "question": "Where was the Games of the XXII Olympiad held?",
      "correct_answer": "Moscow",
      "incorrect_answers": [
        "Barcelona",
        "Tokyo",
        "Los Angeles"
      ]
    },
    {
      "question": "What is the first weapon you acquire in Half-Life?",
      "correct_answer": "A crowbar",
      "incorrect_answers": [
        "A pistol",
        "The H.E.V suit",
        "Your fists"
      ]
    },
  ]
}

new Vue({
  el: '#app',
  data() {
    return {
      rawData: rawData.results
    }
  },
  computed: {
    questions() {
      return this.rawData.map(x => {
        const answers = [x.correct_answer, ...x.incorrect_answers]
        x.answers = shuffle(answers)
        this.$set(x, 'answer', null) // create reactive answer prop
        return x
      })
    }
  }
})

// https://stackoverflow.com/a/2450976/6277151
function shuffle(array) {
  let currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

<script src="https://unpkg.com/vue@2.6.10"></script>

<div id="app">
  <form action="#">
    <fieldset v-for="(q,i) in questions" :key="q.question">
      <h2>{{q.question}} {{q.answer}}</h2>
      
      <div v-for="a in q.answers" :key="a">
        <label>
          <input type="radio" :name="i" :value="a" @change="q.answer = a">
          <span>{{a}}</span>
        </label>
      </div>
    </fieldset>
  </form>
</div>

Answer 3

let merged = [item.correct_answer, ...item.incorrect_answers], или я что-то упустил?