Question

类型错误：e 在 vue.js 中未定义

2018-03-10

7676

javascript vue.js vuejs2

现在我开始感到沮丧 :( 这是我第一次尝试使用 vue.js，它是我来到这个世界后学习的第二个 JS 框架，仅次于 jQuery。我有以下 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 文档。

这是一个有效的演示

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>