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

只要VM中涉及的数据属性发生更改，

computed就会自动重新计算。要将方法附加到事件处理程序，请使用methods block：

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文档。

这是一个有效的演示

＆＃13;

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;
      }
    }
  }
});

＆＃13;

<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>

＆＃13;

TypeError：e在vue.js中未定义

2 个答案: