我是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
不可见吗?
我该如何解决?
答案 0 :(得分:0)
在我的代码中,区别在于您在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>