Недопустимый обработчик клика по событию: получил неопределенное значение Vue.js

В моем коде разница в том, что все, что вы объявляете в функции data(), похоже на локальную переменную для вашего компонента. Таким образом, чтобы получить к нему доступ, вам не нужно использовать this.data.tagName, вы должны получить прямой доступ.

Вы должны изменить свой код на:

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

Ваша переменная mydata нигде не объявлена. Итак, я печатаю строку «mydata».

Еще одна вещь, которую нужно изменить в вашем коде, это то, что вы не можете иметь html-код внутри вашего сеанса <script> из вашего .vue файла. Если вы хотите использовать, вы должны объявить новый компонент или поместить код в сеанс <template> вашего файла .vue.

Если вы хотите поместить все в шаблон:

шаблон сеанса из .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>
        <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>

Другой вариант — переместить код из формы в новый компонент и импортировать его как компонент в текущий файл .vue.

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>