Неверный обработчик события "click": получено undefined ... Vue. js

Question

Я новичок в Vue. js и работаю с модальными окнами. В основном я использую фреймворк Buefy. Это мой пример кода:

<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>

Однако, когда я пытаюсь нажать кнопку Add Tag, я получаю сообщение об ошибке Invalid handler for event "click": got undefined... Кажется, с этим так много проблем, и я не хотел чтобы скопировать сообщение, но я поискал по сайту, и в основном люди сталкиваются с опечатками (method вместо methods). Было бы это из-за объема модального окна? Что-то addTag ему не видно?

Как мне это исправить?

Answer 1

В моем коде разница в том, что все, что вы объявляете в функции 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.

компонентов / модальная форма. 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>

стр. 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>