Нажмите на массив из метода в Vue.js 2

Question

Я ищу, чтобы нажать массив из метода в Vue.js 2, Vue используется в Laravel, и я получаю следующий ответ. Может ли быть лучший способ сделать это?

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, что, вероятно, затеняет/заменяет метод createSelection, который вы определяете. Убедитесь, что вы используете уникальные имена для всех участников.