I have a checkbox, when user marks it, vue.js data with property accepted
changes from false to true.
I want to hide some HTML elements if accepted = true
. I trying to get element by id and set display: none
. I am getting TypeError: document.getElementById(...) is null
. I guess this is because my function is executed before the page is fully loaded.
How could I fix it?
Thank you
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()
}
Aucun commentaire:
Enregistrer un commentaire