2

Vue.js 2 の計算されたプロパティで配列にプッシュしようとしています。Vue は Laravel 内で使用されており、次の応答が返されます。

createSelection:"(評価中のエラー)"

次のコードが使用されています。

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

    computed: {
      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>
4

1 に答える 1

3

計算されたメソッドは何かを返す必要があり、実際には何もしないでください。何かを計算して返すだけです。計算されたメソッドにはまったく戻りがありません。まず、プッシュ ロジックをメソッドに移動します。

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

またerror during evaluation、問題の説明ではなく、Vue の問題のようにも見えませんが、より詳細なエラーを提供できますか?

于 2017-01-17T18:44:02.667 に答える