Question

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

未捕获的TypeError：_vm.createSelection不是函数

我想创造的是：

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的数组属性，可能会影响/替换您定义的createSelection 方法。确保您为所有成员使用唯一名称。

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

1 个答案: