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

Question

I am trying to add up an Object.value, having its adding value bound to the number being inputed in my input through a v-model to total number.

When I input any number then use the @click listener the behaviour is odd, it keeps concatenating whatever I am firing, treating the result as a String instead of a Number.

Interesting that if I comment out the input tag, hence removing the v-model and changing the value on this.shared[2].value to any number greater then 0, the desired behaviour will occur.

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

How could I get the appropriate behaviour here?

tony19 · Accepted Answer · 2022-07-16 02:52:43Z

1

From the 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.

edited Jul 16, 2022 at 2:52

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 25, 2019 at 3:52

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arp Over a year ago

thanks for this refresher. I have been studying vue and its overwhelming sometimes, specially when I forget this details after modules and plus modules of contents =)

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related