Nuxt 计算属性“itemCost”已分配给但它没有设置器

Posted 2023-02-23

【中文标题】Nuxt 计算属性“itemCost”已分配给但它没有设置器

【英文标题】：Nuxt Computed property "itemCost" was assigned to but it has no setter

【发布时间】：2020-11-07 14:09:09

【问题描述】：

我有这样的方法：

methods: 
  itemCost(item) 
   let total = 0;

   for(let choice of item.choices) 
     if(choice.cost) total += choice.cost;
   

   return total
  

而我的 vue 文件是这样的：

index.vue
<div class="container">
  <div class="item" v-for="item in cart.items">
   itemCost(item)
  </div>
</div>

效果很好，但是我收到了这个我不明白的警告：

Computed property "itemCost" was assigned to but it has no setter.

这是一种方法，而不是计算属性，所以不知道为什么我会收到警告。

我查看了与此类似的问题，但所有答案都提到这是因为它是一个 v-model，所以它需要一个 setter，在这种情况下，我正在尝试输出计算，因此不需要用户输入。

任何想法如何摆脱警告？

【问题讨论】：

能否提供完整的组件代码

看起来你有一个名为itemCost的计算属性？

@yash 这是我没有任何计算属性的奇怪之处，它是一种方法而不是计算

:0 如果它是真的真的很奇怪。你确定你从上面的代码中得到了错误？

@Jordash 你能在 Codesandbox 或 Codepen 中创建一个重现吗？

【参考方案1】：

这是因为您的组件结构怪异。您应该在计算之前进行计算，然后使用它打印出来：

computed: 
  itemsWithCost: function() 

    return this.cart.items.map( item => 

      let total = 0;
      for(let choice of item.choices) 
        if(choice.cost) total += choice.cost;
       
      item.total = total;
      return item;
      
   )

在您的模板中：

index.vue
<div class="container">
  <div class="item" 
     v-for="(item,index) in itemsWithCost" 
    :key="index">
     item.total
  </div>
</div>