[Vuejs]-Vue js event not picked up

by

2👍

✅

You are mutating your props directly which will get overwritten when the parent component re-renders, so you need to make a copy of them inside your component, which can be done inside the created method of your component:

  created: function() {
    // copy props to data
    this.entriesCopy = this.entries;
    this.selectedCopy = this.selected;
  },
  data: function() {
    return{
     entriesCopy: [],
     selectedCopy: []
    }
  }

Now you just need to update your watcher:

  watch: {
    selectedCopy: function(val, oldVal) {
      bus.$emit('selected-changed', val);
    }
  }

And your template:

//...
div class="form-group" v-for="(entry, key) in entriesCopy" v-bind:entry="entry">
//...
<input type="checkbox" v-bind:value="entry" v-model="selectedCopy">

to reflect the changes.

Here’s the updated jsfiddle: https://jsfiddle.net/5pyw74h9/

👤craig_h

Leave a comment