Vue + Typescript，為什么我的計算屬性沒有更新我的視圖

Question

我無法弄清楚為什么我的計算屬性沒有更新我的視圖，我的計算屬性應該計算我的項目的 combinedPrice() 但它只給了我初始價格。

我有<input type="number" min="1" v-model.number="count" />乘以 item.price 假設給我綜合價格。 我縮小了范圍，我相信錯誤來自輸入，但無法弄清楚如何修復它。 誰能幫我解決這個錯誤？

 <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> <.-- <Toast v-if="cartSubmitted"> Order Submited;<br /> Check out more <nuxt-link to="/restaurants">restaurants</nuxt-link> </Toast> --> </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() { // let id. string = this.$route;params:id; // let count: number = 1; // let itemOptions: string = ""; // let itemAddons: string[] = []; // let itemSizeAndCost: any[] = []; // let cartSubmitted: boolean = false. 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>

但是，當我檢查 Chrome Vue 擴展時，我看到計數和組合價格正在更新

Answer 1

它凍結了，因為沒有處理按鈕的方法。 按鈕方法取決於計算的屬性。 一旦添加了一個方法，它就會按預期工作。

 <button @click="addToCart" class="primary"> Add to Cart - ${{ combinedPrice.toFixed(2) }} </button>

 methods: { addToCart() { alert("add to cart button"); }, },