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

Question

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

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

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

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

If you want user input to be automatically typecast as a number, you can add the number modifier to your v-model managed inputs:

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

This is often useful, because even with type="number", the value of HTML input elements always returns a string. If the value cannot be parsed with parseFloat(), then the original value is returned.

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

How to add up Object.values using ```v-model```

javascript

vue.js

vuejs2

v-model

vue-cli