CODEWITHSUNDEEP
vue.jsnuxt.js
Jordash
Jordash

Reputation: 3103

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

I have a method like this:

methods: {
  itemCost(item) {
   let total = 0;

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

   return total
  }
}

And my vue file looks like this:

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

It's working great, however I get this warning I don't understand:

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

It's a method, not a computed property so not sure why i'm getting the warning.

I looked at similar questions to this but all the answers mentioned that it was because it was a v-model so it needed a setter, in this case i'm trying to output the calculation so no user input is necessary.

Any ideas how to get rid of the warning?

Upvotes: 0

Views: 1295

Answers (1)

Raffobaffo
Raffobaffo

Reputation: 2856

It because of the weird construction of your component. You should do the calculation before, inside a computed, and then use it to print out:

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

and in your template:

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

Upvotes: 1

Related Questions