如何使用 ```v-model``` 添加 Object.values

Question

我正在尝试将Object.value 相加，将其加值绑定到通过v-model 输入到我的input 中的数字到总数。

当我输入任何数字然后使用@click 侦听器时，行为很奇怪，它会不断连接我正在触发的任何内容，将结果视为String 而不是Number。

有趣的是，如果我注释掉 input tag，从而删除 v-model 并将 this.shared[2].value 上的值更改为大于 0 的任何数字，就会发生所需的行为。

<template>
  <div>
    <input type="number" v-model="shares[2].value">
    <p>{{this.shares[0].value}}</p>
    <button class="btn btn-primary"
            @click="result">Sum An Object Value</button>
  </div>
</template>

<script>

  export default {
    data(){
      return {
        shares: [
          {id: 'BMW', value: 0},
          {id: 'Ford', value: 0},
          {id:'Apple', value: 0}
        ]
      }
    },
    methods: {
      result(){
        this.shares[0].value += this.shares[2].value
      }
    }
  }
</script>

我怎样才能在这里得到适当的行为？

Answer 1

来自Vue docs：

如果您希望用户输入自动转换为数字，您可以将数字修饰符添加到您的 v-model 托管输入：

<input v-model.number="age" type="number">

这通常很有用，因为即使使用 type="number"，HTML 输入元素的值也总是返回一个字符串。如果用 parseFloat() 无法解析该值，则返回原始值。