Question

我有一个数组和一个使用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>

更新

正如您从下图所示，如果我输入creditPerMeal更新但选择没有，我将如何以一种方式进行绑定。

已编辑计算

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]]
      })
      }
  }
}

Answer 1

＆＃34; selection =，＆＃34;：

确实存在语法错误

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

在Vue.js 2.0中从对象和数组创建对象

1 个答案: