[Vuejs]-Accessing a list of checkboxes in a parent component to take action on checked elements

by

0👍

✅

OK, so I got this working the way I wanted it. I tied the component to a custom event called selectItem:

<ObjectTable :source="source" :table_data="connectors_data" :display_fields="display_fields" @selectItem="selectItem"/>

Then in the child component I tied an @change event to a method in the child component:

  <b-form-checkbox id="row.item.id" @change="selectItem($event, row.item.id)" >

Then in the method in the child I call emit to the tied in method in the parent, passing true or false based on the event to determine whether or not the item needs to be added to the list in the parent or removed.

  selectItem: function(e,i) {
    if (e) {
      this.$emit("selectItem", i, true)
    } else {
      this.$emit("selectItem", i, false)
    }
  },

In the parent, the method then either adds to the list or doesn’t and when the button is clicked, it processes the select_items in the parent.

selectItem(item, add) {
      if (add) {
        this.select_items.push(item)
      } else {
        var ind = this.select_items.indexOf(item)
        this.select_items.splice(ind, 1)
      }
    }

BCBB

Leave a comment