[英]Property or method “greet” is not defined on the instance but referenced during render
Same time I got an another error, which is "Invalid handler for event "click"".与此同时,我又遇到了另一个错误,即“事件“单击”的处理程序无效”。
<template>
<div id="example-2">
<!-- `greet` is the name of a method defined below -->
<button v-on:click="greet">Greet</button>
</div>
</template>
<script>
window.onload = function () {
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// creating method greet
methods: {
greet: function (event) {
// `this` inside methods points to the Vue instance
alert('Hello ' + this.name + '!')
// `event` is the native DOM event
if (event) {
alert(event.target.tagName)
}
}
}
})
}
</script>
the template
tag is hidden when the HTML loads so you get the error cannot find element
or something like that.加载 HTML 时, template
标记是隐藏的,因此您会收到错误cannot find element
或类似的信息。 You can load it with javascript.你可以用javascript加载它。
Vue.js does not use the built in template
tag. Vue.js 不使用内置的template
标签。
However if you using it over cdn try it like this但是,如果您通过 cdn 使用它,请尝试这样
<div id="example-2">
<button v-on:click="greet">Greet</button>
</div>
<script>
var example2 = new Vue({
el: "#example-2",
data: {
name: "Vue.js",
},
methods: {
greet: function(event) {
alert("Hello " + this.name + "!");
if (event) {
alert(event.target.tagName);
}
},
},
});
</script>
What you can simply do is remove the template
tags您可以简单地做的是删除template
标签
Here is the working code: https://jsfiddle.net/t49zxdov/2/这是工作代码: https : //jsfiddle.net/t49zxdov/2/
<div id="example-2">
<!-- `greet` is the name of a method defined below -->
<button v-on:click="greet">Greet</button>
</div>
window.onload = function () {
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// creating method greet
methods: {
greet: function (event) {
// `this` inside methods points to the Vue instance
alert('Hello ' + this.name + '!')
// `event` is the native DOM event
if (event) {
alert(event.target.tagName)
}
}
}
})
}
You should separate your vue template and the vue instance.您应该将 vue 模板和 vue 实例分开。 To do that,要做到这一点,
create file, ex: example.vue
copy this code创建文件,例如: example.vue
复制此代码
<template>
<div id="example-2">
<!-- `greet` is the name of a method defined below -->
<button v-on:click="greet">Greet</button>
</div>
</template>
<script>
data() {
return {
name: 'Vue.js'
}
},
methods: {
greet: function (event) {
// `this` inside methods points to the Vue instance
alert('Hello ' + this.name + '!')
// `event` is the native DOM event
if (event) {
alert(event.target.tagName)
}
}
}
</script>
and create this file, ex: app.js
并创建此文件,例如: app.js
const app = new Vue({
el: '#example-2',
});
and then link your app.js
to your index layout.然后将您的app.js
链接到您的索引布局。
I hope you get my point.我希望你明白我的意思。 thanks谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.