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

要更改代码的另一件事是，您的会话<script>内的.vue文件中不能包含html代码。如果要使用，必须声明一个新组件或将代码放入<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>

事件“点击”的无效处理程序：未定义... Vue.js

1 个答案: