CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Linh Nguyễn
Linh Nguyễn

Reputation: 275

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

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.

Upvotes: 0

Views: 1069

Answers (2)

Arif Iqbal
Arif Iqbal

Reputation: 59

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

Upvotes: 0

Ohgodwhy
Ohgodwhy

Reputation: 50767

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
}

Upvotes: 1

Related Questions