I'm facing an issue with a checkbox in my Vue.js application. Whenever the user checks this checkbox, the data property accepted changes from false to true.
My goal is to hide certain HTML elements when accepted = true. I have been attempting to achieve this by accessing the element by its id and setting display: none.
However, I keep encountering the error
TypeError: document.getElementById(...) is nullHow can I resolve this issue?
Thank you for your assistance.
HTML
<div id="acceptedTrue" >
<form action="" class="AGBcheckbox" >
<input
id="checkbox"
onkeyup="agbValidate('checkbox')"
v-model="newContract.accepted"
class="AGBcheckboxInput"
type="checkbox"
name="AGB"
value="AGB"
/>
<label for="AGB">
I agree the terms and conditions
</label>
</form>
</div>
vue.js
new Vue({
el: "#app",
delimiters: ["[[", "]]"],
data() {
return {
newContract: {
postcode: "",
accepted: false,
accepted_by: "",
},
};
},
methods: {
changeAGBview() {
if(this.newContract.accepted = true) {
document.getElementById("acceptedTrue").style.display = "none"
}
}
},
mounted() {
this.changeAGBview()
}