I am looking to push to an array from with in a puted property in Vue.js 2, Vue is being used within Laravel and I am getting the following response.

createSelection:"(error during evaluation)"

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">
    </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,
        creditsPerMeal
      }
    },

    puted: {
      creditsSum () {
        return Object.values(this.creditsPerMeal).reduce((a, b) => a + b, 0)
      },

      createSelection: function (){
        for (var i = 0; i < meals.length; i++) {
           createSelection.push({
              food: meals[i],
              quantity: creditsPerMeal[meals[i]]
            })
          }
      }
    }
  }
</script>

I am looking to push to an array from with in a puted property in Vue.js 2, Vue is being used within Laravel and I am getting the following response.

createSelection:"(error during evaluation)"

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">
    </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,
        creditsPerMeal
      }
    },

    puted: {
      creditsSum () {
        return Object.values(this.creditsPerMeal).reduce((a, b) => a + b, 0)
      },

      createSelection: function (){
        for (var i = 0; i < meals.length; i++) {
           createSelection.push({
              food: meals[i],
              quantity: creditsPerMeal[meals[i]]
            })
          }
      }
    }
  }
</script>

• javascript
• vue.js
• vue-ponent
• vuejs2
• puted-properties

Share Improve this question Follow asked Jan 17, 2017 at 18:35 James ParsonsJames Parsons 92555 gold badges2020 silver badges3838 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Computed method should return something and actually they should not do anything, just pute something and return. Your puted method has no return at all. First of all move your push logic to method:

   puted: {
      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]]
              })
          }
      }
   }

Also error during evaluation is not description of problem and not looks like Vue problem, may be you can provide more detailed error?