VueJS : Unhandled error with simple script

Question

Still learning VueJS, I just wanted to know why when I click on my button my function selection doesn't work. All the rest in the created() is fine and shows the correct , but in my methods section, just to show a console.log on a click event I have this error :

[Vue warn]: Unhandled error during execution of native event handler at

Am I missing something ?

I only have the code below and the 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>

Thank you for your help and support

danh · Accepted Answer · 2021-07-24 15:35:13Z

0

The method is attempting to log an undefined symbol: 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>

answered Jul 24, 2021 at 15:35

danh

62.7k10 gold badges100 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

walox · Accepted Answer · 2024-08-21 07:49:09Z

0

If you are here because of the same error but in your case it's not just an attempt to log an undefined symbol :

I don't know why exactly but in somecases Vue does not throw the right error. I had to wrap my code in a try/catch and log manually the error in the catch block. With this trick I had a better error that led me directly to the responsible line of code.

answered Aug 21, 2024 at 7:49

walox

7141 gold badge12 silver badges33 bronze badges

Collectives™ on Stack Overflow

VueJS : Unhandled error with simple script

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related