VueJS trigger Checkbox by clicking table row

Question

I'm really new to vuejs and I was wondering if it is possible to trigger the checkbox by clicking the table row.

here's a fiddle for you to play. https://jsfiddle.net/50wL7mdz/265410/

HTML

<div id="app">
<table>
    <tbody>
      <tr v-for="cat in categories" @click="selectCat(cat)">
        <td><input type="checkbox" :value="cat" v-model="selected" name="" id=""></td>
        <td>{{ cat.code}}</td>
        <td>{{ cat.name }}</td>
      </tr>
    </tbody>
</table>
<button @click="checkData()">Check</button>
</div>

VUEJS

  new Vue({
  el: '#app',
  data() {
    return {
     categories: [
                {code:'HW', name:'Hardware'},
          {code:'SW', name:'Software'},
          {code:'OS', name:'Office Supplies'}
     ],
     selected:[]
    }
  },
  methods:{ 
  selectCat(cat){
    this.selected.push(cat);
  },
 checkData(){
      alert(1);
       console.log(this.selected);
      }
  }
})

Thanks in advance.

@Nit I've tried binding an array on it... and create an event on the table row.. get that Item and push on the array.. will update the code give me a second — Sam Teng Wong
– Sam Teng Wong, Commented Apr 4, 2018 at 8:45

Philip Feldmann · Accepted Answer · 2018-04-04 09:19:33Z

5

Add a selected model to your categories and switch that attribute on row click like so:

<div id="app">
    <table>
        <tbody>
          <tr v-for="(cat, index) in categories" :key="index" @click="cat.selected = !cat.selected">
            <td><input type="checkbox" v-model="cat.selected"></td>
            <td>{{ cat.code}}</td>
            <td>{{ cat.name }}</td>
          </tr>
        </tbody>
    </table>
</div>


new Vue({
  el: '#app',
  data() {
    return {
     categories: [
                {code:'HW', name:'Hardware', selected: false},
          {code:'SW', name:'Software', selected: false},
          {code:'OS', name:'Office Supplies', selected: false}
     ]
    }
  },
  methods:{
  }
})

Manipulating the state of natives components should always be done by changing their v-model, rather than going into the DOM and and setting a selected attribute. Basically let your model define the state of your view.

Here's another version that'll use a separate array for handling the selected state:

<div id="app">
    <table>
        <tbody>
          <tr v-for="(cat, index) in categories" :key="index" @click="toggleSelect(cat)">
            <td><input type="checkbox" :checked="selected.includes(cat.code)"></td>
            <td>{{ cat.code}}</td>
            <td>{{ cat.name }}</td>
          </tr>
        </tbody>
    </table>
</div>

new Vue({
  el: '#app',
  data() {
    return {
     categories: [
          {code:'HW', name:'Hardware'},
          {code:'SW', name:'Software'},
          {code:'OS', name:'Office Supplies'}
     ],
     selected: ['HW']
    }
  },
  methods:{
    toggleSelect (cat) {

      if (this.selected.includes(cat.code)) {
        this.selected.splice(this.selected.findIndex(v => v === cat.code), 1)
      } else {
        this.selected.push(cat.code)
      }
    } 
  }
})

edited Apr 4, 2018 at 9:19

answered Apr 4, 2018 at 8:55

Philip Feldmann

8,5037 gold badges47 silver badges66 bronze badges

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

3 Comments

Sam Teng Wong Over a year ago

is there way for accessing the child element of the tr? what I want is just to actually toggle the checkbox by clicking the table row.. since I get the selected category into an array.

Philip Feldmann Over a year ago

Yes that's totally possible BUT not the vue way. Vue abstracts the dom manipulation away from you, so that you can focus on manipulating your data. I think there's a better way to still make it work with having the selected attribute in a separate array without having to manipulate the dom itself, let me quickly update my answer.

Philip Feldmann Over a year ago

@SamTengWong I've updated my post to contain a newer version that'll outsource the selected categories to its own array. Hope that fits your needs better. Note that it has one value pre-selected, if you don't want that, just delete it from the selected array in the data. Note that we never manipulate the DOM, just the data and let vue do the manipulation for us. That's the core concept you have to remember whenever using vue.

Collectives™ on Stack Overflow

VueJS trigger Checkbox by clicking table row

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related