[Vuejs]-Invalid handler for event "click": got undefined… Vue.js

by

0👍

In my code the difference it that everything you declare in the data() function, is like a local variable to your component. So to access that you do not need to use the this.data.tagName you have to access in a straight way.

You must change your code to:

if (this.tagName.trim().length > 0) {
   console.log('mydata');
}

Your variable mydata is not declared anywhere. So I print a string ‘mydata’.

Another thing to change in your code is that, you can’t have html code inside your session <script> form your .vue file. If you would like to use, you must declare a new component or put the code inside the <template> session of your .vue file.

If you would like to put everything inside template:

template session from .vue file:

<template>
<section>
    <button class="button is-primary is-small" @click="addModal = true">
          <span>Insert New</span>
        </button>
        <b-modal :active.sync="addModal"
             has-modal-card
             trap-focus
             :destroy-on-hide="false"
             aria-role="dialog"
             aria-modal>
        <modal-form v-bind="formProps">
          <form action="">
            <div class="modal-card" style="width: auto">
            //input fields here
            <footer class="modal-card-foot">
                <button class="button" type="button" @click="$parent.close()">Close</button>
                <button class="button is-primary" @click="addTag">Add Tag</button>
            </footer>
            </div>
        </form>
      </modal-form>
    </b-modal>
</section>
</template>

Another option is to move code from your form to a new "component" and import it as a component in your current .vue file.

components/Modalform.vue

<template>
   <form action="">
        <div class="modal-card" style="width: auto">
        //input fields here
        <footer class="modal-card-foot">
        <button class="button" type="button" @click="$parent.close()">Close</button>
        <button class="button is-primary" @click="addTag">Add Tag</button>
        </footer>
        </div>
   </form>
</template>

<script>
export default {
  name: "ModalForm",
};
</script>

page.vue

<template>
  <section>
        <button class="button is-primary is-small" @click="addModal = true">
              <span>Insert New</span>
            </button>

        <b-modal :active.sync="addModal"
                 has-modal-card
                 trap-focus
                 :destroy-on-hide="false"
                 aria-role="dialog"
                 aria-modal>
            <ModalForm v-bind="formProps"></ModalForm>
        </b-modal>
    </section>
</template>

<script>
import ModalForm from "@/components/Modalform.vue";
export default {
  name: "Home",
  components: {
    ModalForm
  }
};
</script>

Leave a comment