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

正如我在评论中指出的那样，您应该将 methods 属性用于您的 v-on:change 回调。

简而言之，这意味着您必须将computed 更改为methods

要了解computed 和methods 属性之间的区别，请查看两者的vuejs 文档。

• Computed Properties and Watchers

• Events

这是一个工作演示

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>