v-for custom component checkbox not working - vue.js

Question

I am using v-for with a custom component
Vue.component('lineitem', {
template: '#lineitem-template',
props: {
item: {
required: false,
default: null
},
},
computed: {
local_line_item() {
console.log("Re computing line item")
return _.clone(this.item)
},
},
methods: {
set_taxable(e) {
e.preventDefault();
if (this.local_line_item.taxable == false) {
this.local_line_item.taxable = true;
} else {
this.local_line_item.taxable = false;
}
console.log("Changing taxable to ", this.local_line_item);
},
}
});
with this template:
<template id="lineitem-template">
<tr>
<td>
<input type="text" class="form-control" v-model="local_line_item.cost">
</td>
<td>
<div class="option" #click="set_taxable">
<input type="checkbox" v-model="local_line_item.taxable" v-bind:true-value="true" v-bind:false-value="false">
<label for="check1"></label>
</div>
</td>
</tr>
</template>
see this JSFiddle: https://jsfiddle.net/shaunc869/1Ly7mL6n/7/
When I click the checkbox I am changing the value of the internal variable, but the checkbox doesn't change, what am I doing wrong? Thanks!

Answer 1

e.preventDefault() inside set_taxable is the cause of problem. Removing that part works just fine. You can see the updated fiddle here: https://jsfiddle.net/1Ly7mL6n/9/
Also, I don't understand your rationale behind using the click binding to trigger set_taxable. Since you have already used v-model binding to toggle local_line_item.taxable in accordance with the checked state of the checkbox, you do not need a click handler for it. So unless you plan to do some more operations in the click handler, you could remove that as well.