VueJS event binding in v-for

Question

I'm displaying a list of objects with VueJS like so:

<div v-for="register in registers">
    <input type="checkbox" v-model="register.isEnabled">
    <input type="text" v-model="register.name" :disabled="!register.isEnabled">

    <span v-if="register.saved">Saved</span>
    <span v-else><a @click="save(register)">Save now</a></span>
</div>

What I'd like to do, is to watch for changes in this object's values and set the saved attribute to false. This is an exemplary version of my Vue instance:

new Vue({
    el: '#app',
    data: {
        registers: [
            { isEnabled: true, name: 'Register 1', saved: true },
            { isEnabled: false, name: '', saved: true },
        ]
    },
    methods: {
        save: function(event) {
            // Save object, set saved to true
        }
    }
});

I've tried settings an onchange listener to the div with the v-for attribute:

<div v-for="register in registers" @change="onChange(register)">

However this only triggers when the first input element is changed (e.g. the checkbox).

Am I able to somehow listen to all changes made to this register object, without having to add a @change event to every single input? If so, how?

Community · Accepted Answer · 2017-05-23 11:52:43Z

1

Am I able to somehow listen to all changes made to this register object, without having to add a @change event to every single input?

This sounds like a pretty reasonable solution actually, especially since the change event doesn't bubble.

I tried to come up with a solution using watch, but since deep watch is not an option for large arrays, it would become pretty messy.

new Vue({
    el: '#app',
    ready: function() {
        this.registers.forEach(function(register, index) {
            this.$watch('registers[' + index + ']', function(newRegister, oldRegister) {
              // Check that it wasn't the `saved` state that changed
              if (newRegister.saved === oldRegister.saved) {
                  newRegister.saved = false;
              }
            });
        });
    },
    data: {
        registers: [
            { isEnabled: true, name: 'Register 1', saved: true },
            { isEnabled: false, name: '', saved: true },
        ]
    },
    methods: {
        save: function(event) {
            // Save object, set saved to true
        }
    }
});

And then you would have to rebind all the watchers in case the registers properties change.

So you're probably easier off just using @change listeners.

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered May 2, 2016 at 9:48

nils

27.4k6 gold badges73 silver badges82 bronze badges

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

2 Comments

Tremendus Apps Over a year ago

Agree with nils generally ... run a loop on the properties of each item you want to watch in the array ... although nils I think it's this.$watch to setup the listener, not this.watch ;)

nils Over a year ago

Thanks, corrected that ;) I'm not voting for my solution though, I'm much for the OP's solution :)

Collectives™ on Stack Overflow

VueJS event binding in v-for

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related