如何使用 ```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 文檔：

如果您希望用戶輸入自動轉換為數字，您可以將數字修飾符添加到您的 v-model 托管輸入：

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

這通常很有用，因為即使使用 type="number"，HTML 輸入元素的值也總是返回一個字符串。 如果無法使用 parseFloat() 解析該值，則返回原始值。