jeudi 10 décembre 2020

How to fix [Vue warn]: Error in mounted hook: "TypeError: document.getElementById(...) is null" (found in

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