Создание объекта из объекта и массива в Vue.js 2.0

У меня есть массив и объект, созданные с помощью Vue.js, я хотел бы объединить их в один массив’ selection ‘ в формате:

selection[
{food: Chicken, quantity: 3},
{food: Rice, quantity: 2},
{food: Pasta, quantity: 1}
];

У меня есть следующая настройка, чтобы иметь возможность сделать это:

  var selection = []

  for (var i = 0; i < meals.length; i++) {
      selection.push({
          food: this.meals[i],
          quantity: creditsPerMeal[meals[i]]
      });
    },

Как это стоит, я получаю синтаксическую ошибку, но я не уверен, что я должен делать это как часть данных. Я чувствую, что я довольно близко.

Вот полный код:

<template>
  <div>
    <div>Credits carried through: {{ credits }}</div>
    <div v-for="meal in meals">
      {{meal}}
      <input :id="meal" :name="meal" v-model.number="creditsPerMeal[meal]" type="number">
    </div>
    <div>
      Credits used: {{creditsSum}}
    </div>
  </div>
</template>

<script>
  export default {

    mounted() {
        console.log('Component ready.');

        console.log(JSON.parse(this.f));

    },

    props: ['f','c'],

    name: 'credits',
    data: function () {
     var meals = JSON.parse(this.f)

      var creditsPerMeal = {}
      for (var i = 0; i < meals.length; i++) {
        creditsPerMeal[meals[i]] = 0
      },

      var selection = []

      for (var i = 0; i < meals.length; i++) {
          selection.push({
              food: this.meals[i],
              quantity: creditsPerMeal[meals[i]]
          });
        },

      return {
        credits: this.c,
        meals,
        selection=,
        creditsPerMeal
      }
    },
    computed: {
      creditsSum () {
        return Object.values(this.creditsPerMeal).reduce((a, b) => a + b, 0)
      }
    }
  }
</script>

ОБНОВЛЕНИЕ

Как вы можете видеть из изображения ниже, если я вводил обновления creditsPerMeal, но выбор не делает, как бы я связал таким образом, что это было бы.

Введите описание изображения здесь

Отредактированный вычисленный

computed: {
  creditsSum () {
    return Object.values(this.creditsPerMeal).reduce((a, b) => a + b, 0)
  },

  createSelection: function (){
    for (var i = 0; i < meals.length; i++) {
       return createSelection.push({
          food: meals[i],
          quantity: creditsPerMeal[meals[i]]
      })
      }
  }
}

1 ответ

  1. У вас действительно есть синтаксическая ошибка в » selection=,»:

    return {
        credits: this.c,
        meals,
        selection=,
        creditsPerMeal
      }