Vue.js make row clickable for checkbox

Question

I'm trying to make a list item clickable. When the item is clicked the checkbox within the list item should be enabled or disabled. However it's not working the way I expect.

I've made an example:

var app = new Vue({
  el: '#app',
  data: {
    showNav: false,
    categories: [{name: 'test' }]
  },
  mounted() {

    this.categories.forEach((category) => {
      category.active = true;
    });
  }
})

<div id="app">
  <nav class="navbar-dropdown w-full">
      <ul class="list-reset">
          <li class="flex justify-between items-center hover:bg-grey hover:text-white text-grey uppercase cursor-pointer p-3" v-for="category in categories" @click="category.active = !category.active">
              {{ category.name }}
              <input type="checkbox" class="shadow" v-model="category.active" @click="category.active = !category.active"/>
          </li>
      </ul>
  </nav>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

When I change this:

categories: [{name: 'test' }]

to this:

categories: [{name: 'test', active: true }]

It's working. But in my application I fetch the application with an ajax and receive the category objects without an active property.

That's why I'm doing this:

this.categories.forEach((category) => {
      category.active = true;
    });

But that's obviously not working. How could I fix this?

Instead of a v-model on the <input>, have you tried binding to value attribute? — Divyanth Jayaraj
– Divyanth Jayaraj, Commented Apr 3, 2018 at 20:45
This is an issue with reactivity. Vuejs can't observe a property that doesn't exist on the object (in this case) in question. Why not use the index of the object as the reference and compare based on the index, instead of adding an arbitrary property to the object called active? — Ohgodwhy
– Ohgodwhy, Commented Apr 3, 2018 at 21:17

oniondomes · Accepted Answer · 2018-04-03 21:22:20Z

As @ohgodwhy mentioned in his comment there's an issue with the way you define a property for a category. I'm having a hard time explaining why exactly this doesn't work, although this is how you could do this:

var app = new Vue({
  el: '#app',
  data: {
    showNav: false,
    categories: [{
      name: 'test'
    }],
  },
  mounted() {
    this.categories = this.categories.map((category) => {
      return {
        name: 'test',
        active: true,
      };
    });
  },
});

<div id="app">
  <ul class="list-reset">
    <li class="flex justify-between items-center hover:bg-grey hover:text-white text-grey uppercase cursor-pointer p-3" v-for="category in categories" @click="category.active = !category.active">
      {{ category.name }}
      <input type="checkbox" class="shadow" v-model="category.active" @click="category.active = !category.active" />
    </li>
  </ul>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

I would appreciate any additions or expansions on the reason why OP has this issue.

Collectives™ on Stack Overflow

Vue.js make row clickable for checkbox

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related