从 Vue.js 2 中的方法内推送到数组

Question

我希望从 Vue.js 2 中的方法中推送到数组，Laravel 中正在使用 Vue，我收到以下响应。有更好的方法吗？

Uncaught TypeError: _vm.createSelection is not a function

我想创建的是：

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

正在使用以下代码：

<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" v-on:input="createSelection()">
    </div>
    <div>
      Credits used: {{creditsSum}}/{{credits}}
    </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 createSelection = []


      return {
        credits: this.c,
        meals,
        createSelection: [],
        creditsPerMeal
      }
    },
    computed: {
      creditsSum () {
        return Object.values(this.creditsPerMeal).reduce((a, b) => a + b, 0)
      },
    },
    methods: {
       createSelection (){
           for (var i = 0; i < meals.length; i++) {
               createSelection.push({
                  food: meals[i],
                  quantity: creditsPerMeal[meals[i]]
               })
           }
       }
     }
  }
</script>

更新方法

methods: {
   createSelection (){
       for (var i = 0; i < JSON.parse(this.f).length; i++) {
           this.createSelection.push({
              food: JSON.parse(this.f)[i],
              quantity: creditsPerMeal[JSON.parse(this.f)[i]]
           })
       }
   }
 }

Answer 1

您的 data 方法正在创建一个名为 createSelection 的数组属性，这可能是 shadowing/replacing createSelection 方法你在定义。确保您为所有成员使用唯一的名称。

从 Vue.js 2 中的方法内推送到数组

Push to an array from within a method in Vue.js 2

javascript

vue.js

vuejs2