How to update data object when another data change in same object in VueJS

Question

I'm new to VueJS, I want to ask how can I update the money when the model changed (sum of money and model) then return back the money to html.

<div class="mb-4" v-for="(item, index) in persons" :key="index">
    <div class="flex items-center justify-between">
        <label :for="'person-'+item.id">{{ item.name }}</label>
        <p>{{ item.money }}</p>
    </div>
    <input v-model="item.model" :id="'person-'+item.id" type="number">
</div>

let app = new Vue({
    el: '#app',
    data() {
        return {
            persons: [{
                id: 1,
                name: 'John',
                money: 1000,
                model: ''
            },
            {
                id: 2,
                name: 'Alex',
                money: 5000,
                model: ''
            },
            {
                id: 3,
                name: 'Katie',
                money: 2500,
                model: ''
            }]
        }
    },
    watch: {
        'persons.model'(newVal, oldVal) {
            console.log(newVal)
        }
    }
});

This is my codepen: https://codepen.io/LinhNT/pen/abOymrg

Thank you.

Ohgodwhy · Accepted Answer · 2020-03-03 09:15:46Z

1

You can bind an event to change and pass an argument to it:

<input v-model="item.model" @change="(e) => updateMoney(e, item) :id="'person-'+item.id" type="number">

And then make said function updateMoney:

updateMoney(e, item) {
    item.money = e.target.value
}

answered Mar 3, 2020 at 9:15

Ohgodwhy

50.9k11 gold badges86 silver badges114 bronze badges

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

Comments

Arif Iqbal · Accepted Answer · 2020-03-03 09:26:58Z

0

You can get the desire result by an Event try this.

<input v-model.number="item.model" @input="item.money = item.model" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" :id="'person-'+item.id" type="number">

answered Mar 3, 2020 at 9:26

Arif Iqbal

596 bronze badges

1 Comment

Linh Nguyễn Over a year ago

So can I sum total it. Like @input="item.money = item.model + item.money"

Collectives™ on Stack Overflow

How to update data object when another data change in same object in VueJS

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related