VueJS：简单脚本未处理的错误

Question

还在学习VueJS，我只是想知道为什么当我点击按钮时我的功能选择不起作用。 创建的（）中的所有其余部分都很好并且显示了正确的，但是在我的方法部分中，只是为了在单击事件上显示 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>

Answer 2

如果您因为同样的错误而来到这里，但在您的情况下，这不仅仅是尝试记录未定义的符号：

我不知道到底为什么，但在某些情况下 Vue 不会抛出正确的错误。我必须将代码包装在 try/catch 中，并在 catch 块中手动记录错误。通过这个技巧，我得到了一个更好的错误，直接引导我到负责的代码行。