Having trouble making a list item clickable? Need the checkbox within the list item to be enabled or disabled on click, but it's not behaving as expected?
Here is 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0573706045372b302b3433">[email protected]</a>/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>While changing:
categories: [{name: 'test' }]
To:
categories: [{name: 'test', active: true }]
gets it working. But if your application fetches the data with an ajax and doesn't include the active property for category objects, you may face issues like:
this.categories.forEach((category) => {
category.active = true;
});
What could be done to address this problem?