I'm struggling to understand why my computed property isn't updating the view as expected. The computed property is meant to calculate the total price of my items by combining their individual prices, but it's only showing me the initial price.
I have an
<input type="number" min="1" v-model.number="count" /><template>
<main class="container">
<section
class="image"
:style="`background: url(/${currentItem.img}) no-repeat center center`"
></section>
<section class="details">
<h1>{{ currentItem.item }}</h1>
<h3>Price: ${{ currentItem.price.toFixed(2) }}</h3>
<div class="quantity">
<input type="number" min="1" v-model.number="count" />
<button @click="addToCart" class="primary">
Add to Cart - ${{ combinedPrice }}
</button>
</div>
{{ combinedPrice }}
<fieldset v-if="currentItem.options">
<legend>
<h3>Options</h3>
</legend>
<div v-for="option in currentItem.options" :key="option">
<input
type="radio"
name="option"
:id="option"
:value="option"
v-model="itemOptions"
/>
<label :for="option">{{ option }}</label>
</div>
</fieldset>
<fieldset v-if="currentItem.addOns">
<legend>
<h3>Add Ons</h3>
</legend>
<div v-for="addon in currentItem.addOns" :key="addon">
<input
type="checkbox"
name="addon"
:id="addon"
:value="addon"
v-model="itemAddons"
/>
<label :for="addon">{{ addon }}</label>
</div>
</fieldset>
</section>
<section class="options">
<h3>Description</h3>
<p>{{ currentItem.description }}</p>
</section>
</main>
</template>
<script lang="ts">
import Vue from "vue";
import { mapState } from "vuex";
import { Item } from "@/api/interfaces";
export default Vue.extend({
data() {
return {
id: this.$route.params.id,
count: 1,
itemOptions: "",
itemAddons: [],
itemSizeAndCost: [],
cartSubmitted: false,
};
},
computed: {
...mapState(["foodData"]),
currentItem(): Item {
let result;
for (let i = 0; i < this.foodData.length; i++) {
for (let j = 0; j < this.foodData[i].menu.length; j++) {
if (this.foodData[i].menu[j].id === this.id) {
result = this.foodData[i].menu[j];
break;
}
}
}
return result;
},
combinedPrice(): number {
let total = this.count * this.currentItem.price;
return total;
},
},
});
</script>Upon inspecting the Chrome Vue Extension, I can see that the count and combinedPrice are being updated correctly