VueJS:使用简单脚本的未处理错误

Question

还在学习VueJS，我只是想知道为什么当我点击我的按钮时，我的功能选择不起作用。create()中的所有其余部分都很好，并且显示正确，但在我的方法部分中，只是为了在单击事件上显示console.log，我有这个错误:

[Vue warn]:本机事件处理程序执行期间未处理的错误在

我错过什么了吗?

我只有以下代码和CDN:

<div id="main-product">
<button v-on:click="selection" type="button" class="">
j'affiche coucou
</button>
</div>

<script>
if (document.querySelector("#main-product")) {
const productForm = Vue.createApp({
delimiters: ["${", "}"],
data() {
return {
open: false,
};
},
created() {
console.log("vueJS fonctionne correctement");
},
methods: {
selection() {
console.log(coucou)
}
}
}).mount("#main-product");
}
</script>

感谢您的帮助和支持

Answer 1

方法正在尝试记录一个未定义的符号:coucou。

var app = new Vue({
el: '#app',
data: {
},
methods: {
selection() {
console.log('coucou')
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div id="main-product">
<button v-on:click="selection" type="button" class="">
j'affiche coucou
</button>
</div>
</div>