I have a snippet of HTML code that includes a Vue.js script:
<!DOCTYPE html>
<html>
<head>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" :checked="bool" @change="checked(this)">
</div>
<script>
var app = new Vue({
el: "#app",
data() {
return { "bool": true }
},
methods: {
checked(elem) {
console.log("Hey!");
// Cast to bool
this.bool = !!elem.checked;
}
}
})
</script>
</body>
Although I am planning on incorporating more complex functionality, I have chosen not to use v-model.
When the checkbox is clicked, the console displays a message every time. However, the bool property seems to only update the first time the checkbox is clicked, and not on subsequent clicks. Can anyone suggest what might be causing this issue?