CODEWITHSUNDEEP
javascriptvue.jsvuejs2
James Parsons
James Parsons

Reputation: 925

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

I am looking to push to an array from within a method in Vue.js 2, Vue is being used within Laravel and I am getting the following response. Could there be a better way of doing it?

Uncaught TypeError: _vm.createSelection is not a function

What I wish to create is:

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

The following code is being used:

<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>

UPDATED METHOD

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

Upvotes: 0

Views: 5634

Answers (1)

Jacob
Jacob

Reputation: 78920

Your data method is creating an array property called createSelection, which is likely shadowing/replacing the createSelection method you're defining. Make sure you're using unique names for all members.

Upvotes: 1

Related Questions