TypeError: e 在 vue.js 中未定義

Question

現在我很沮喪:(這是我第一次嘗試使用 vue.js，這是繼 jQuery 之后我來到這個星球以來學習的第二個 JS 框架。我有以下 HTML：

 var main = new Vue({ el: ".main-content", data: { heading: "First Vue Page", usdamount: 0, currencies: [{ label: "GBP", rate: 0.7214, value: 0 }, { label: "EUR", rate: 0.80829, value: 0 }, { label: "CAD", rate: 1.2948, value: 0 } ] }, computed: { updateCurrencies: function() { console.log(this.usdamount); var usd = parseFloat(this.usdamount); for (var i = this.currencies.length - 1; i >= 0; i--) { this.currencies[i].value = this.currencies[i].rate * usd; } } } });

 <script src="https://cdn.jsdelivr.net/npm/vue"></script> <section class="main-content"> <h1>{{ heading }}</h1> <input type="number" v-on:change="updateCurrencies" v-model="usdamount"> <p class="cur-value" v-for="cur in currencies"> <strong>{{ cur.label }}</strong>: {{ cur.value }} </p> </section>

當我加載頁面時，一切正常，我在控制台上記錄了一個零。 如果我嘗試更改輸入，我會得到：

TypeError: e is undefined
Stack trace:
we@https://cdn.jsdelivr.net/npm/vue:6:26571
X@https://cdn.jsdelivr.net/npm/vue:6:7441
...

我去了抱怨的部分，更加迷失了。 就是這個功能：

function we(t,e,n,r){(r||si).removeEventListener(t,e._withTask||e,n)}

即使在多次嘗試改變事物並隔離問題之后，我也不知道是什么導致了錯誤。

Answer 1

computed用於在您的 VM 中涉及的數據屬性發生更改時自動重新計算。 要將方法附加到事件處理程序，請使用methods塊：

 var main = new Vue({ el: ".main-content", data: { heading: "First Vue Page", usdamount: 0, currencies: [{ label: "GBP", rate: 0.7214, value: 0 }, { label: "EUR", rate: 0.80829, value: 0 }, { label: "CAD", rate: 1.2948, value: 0 } ] }, methods: { updateCurrencies: function() { console.log(this.usdamount); var usd = parseFloat(this.usdamount); for (var i = this.currencies.length - 1; i >= 0; i--) { this.currencies[i].value = this.currencies[i].rate * usd; } } } });

 <script src="https://cdn.jsdelivr.net/npm/vue"></script> <section class="main-content"> <h1>{{ heading }}</h1> <input type="number" v-on:change="updateCurrencies" v-model="usdamount"> <p class="cur-value" v-for="cur in currencies"> <strong>{{ cur.label }}</strong>: {{ cur.value }} </p> </section>

由於您確實存在數據取決於usdamount並且應該在該值發生變化時進行調整的情況，因此將currencies作為計算屬性將是一種更好的方法：

 var main = new Vue({ el: ".main-content", data: { heading: "First Vue Page", usdamount: 0, }, computed: { currencies() { let cur = [{ label: "GBP", rate: 0.7214, value: 0 }, { label: "EUR", rate: 0.80829, value: 0 }, { label: "CAD", rate: 1.2948, value: 0 } ]; for (var i = cur.length - 1; i >= 0; i--) { cur[i].value = cur[i].rate * parseFloat(this.usdamount); } return cur; } } });

 <script src="https://cdn.jsdelivr.net/npm/vue"></script> <section class="main-content"> <h1>{{ heading }}</h1> <input type="number" v-model="usdamount"> <p class="cur-value" v-for="cur in currencies"> <strong>{{ cur.label }}</strong>: {{ cur.value }} </p> </section>

這樣你就不必自己實現一個監聽器，而是使用 Vue 的機制來更新你的數據和 DOM。

Answer 2

正如我在評論中指出的那樣，您應該為您的v-on:change回調使用methods屬性。

簡而言之，這意味着您必須將computed更改為methods

要了解computed屬性和methods屬性之間的區別，請查看兩者的 vuejs 文檔。

• 計算屬性和觀察者

• 活動

這是一個工作演示

 var main = new Vue({ el: ".main-content", data: { heading: "First Vue Page", usdamount: 0, currencies: [{ label: "GBP", rate: 0.7214, value: 0 }, { label: "EUR", rate: 0.80829, value: 0 }, { label: "CAD", rate: 1.2948, value: 0 } ] }, methods: { updateCurrencies: function() { console.log(this.usdamount); var usd = parseFloat(this.usdamount); for (var i = this.currencies.length - 1; i >= 0; i--) { this.currencies[i].value = this.currencies[i].rate * usd; } } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script> <section class="main-content"> <h1>{{ heading }}</h1> <input type="number" v-on:change="updateCurrencies" v-model="usdamount"> <p class="cur-value" v-for="cur in currencies"> <strong>{{ cur.label }}</strong>: {{ cur.value }} </p> </section>