Invalid handler for event "click": got undefined... Vue.js

Question

I'm new to Vue.js and I'm working with modals. I'm using the Buefy framework mostly. This is my example code:

<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"></modal-form>
        </b-modal>
    </section>
</template>

<script>
const ModalForm = {
  props: ["tagName", "moreFields"],
  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>
        `,
};
export default {
  components: {
    ModalForm,
  },
  data() {
    return {
      data: {
        tagName: "",
      },
      addModal: false,
    };
  },
  methods: {
    addTag() {
      if (this.data.tagName.trim().length > "") {
        console.log(mydata);
      }
    },
  },
};
</script>

However, when I try to click the Add Tag button, I get the error Invalid handler for event "click": got undefined... There seems to be so many issues with this and I didn't want to duplicate a post, but I've searched around the site and mostly people have typo issues (method instead of methods). Would it be because of the scope of the modal? That somehow addTag isnt visible to it?

How would I fix this?

Welcome! I've added vue.js and buefy tags. Please add all relevant tags to future questions. Thank you. — iAmOren

Danizavtz Danizavtz · Accepted Answer · 2020-08-02T14:42:14

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>

Invalid handler for event "click": got undefined... Vue.js

1 Answers