javascript - 从 Vue.js 2 中的计算属性中推送到数组

标签 javascript vue.js vue-component vuejs2 computed-properties

我希望从 Vue.js 2 中的计算属性中的 with 推送到数组,Vue 正在 Laravel 中使用,我得到以下响应。

createSelection:"(error during evaluation)"

正在使用以下代码:

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

最佳答案

计算方法应该返回一些东西,实际上他们不应该做任何事情,只是计算一些东西并返回。您的计算方法根本没有返回值。 首先将推送逻辑移至方法:

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

另外评估期间的错误不是问题的描述,看起来不像Vue问题,也许你可以提供更详细的错误?

关于javascript - 从 Vue.js 2 中的计算属性中推送到数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41704530/

相关文章:

javascript - 带有叠加层和按钮的 Div

node.js - 运行 'The "时如何修复 : 'vue add vuetify' path"argument must be of type string. 接收类型未定义'

javascript - 这个 TypeError 是否与错误的 this.$emit 相关联?

javascript - 如何在 Visual Studio 的起始页上设置 URL 查询参数

javascript - 用图像和其他东西替换动态内容

javascript - 使用 javascript 折叠表单

javascript - VueJS 中的数据绑定(bind)以构建 URL

python - Django 休息 : Files\Images Uploading

javascript - 如何在vue js中显示评分值?

javascript - 如何使用Vue登录后渲染标题和侧边栏