vueJS click event not working

Question

I'm trying to create a click event in Vue in a static HTML file as test but it doesn't work as expected. See full code below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--[if IE]><![endif]-->
<!--Empty IE conditional comment to improve site performance-->
<html lang="en">

<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<script type="text/babel">
var titleFilter = new Vue({
  el: '#filter',
  methods: {
    clickEvent: function(){
        console.log('Vue is working.');
    }
  }
});
</script>

<a id="filter" v-on:click="clickEvent" href="#">CLICK ME</a>

</body>
</html>

So as a checklist:

I have my function in a method object
Function names are correct
I'm including the library
In my script tag, I'm specifing babel as type

It's not working, what's wrong?

Well, one, your script to create the Vue executes before #filter exists. — Bert
– Bert, Commented Jan 5, 2018 at 16:13
@Bert as in the order of the script tag? I moved the script tag below anchor with same result. Console does not log. — user5481714
– user5481714, Commented Jan 5, 2018 at 16:15
Wrap the A in a div with ID filter and then remove the filter ID from anchor tag — Derek Pollard
– Derek Pollard, Commented Jan 5, 2018 at 16:16

Praveen Alluri · Accepted Answer · 2018-01-05 16:19:55Z

3

This works

<html lang="en">

<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>

<a id="filter" v-on:click="clickEvent" href="#">CLICK ME</a>
<script type="text/javascript">
var titleFilter = new Vue({
  el: '#filter',
  methods: {
    clickEvent: function(){
        console.log('Vue is working.');
    }
  }
});
</script>
</body>
</html>

Change text/babel to text/javascript and move your JS code below

answered Jan 5, 2018 at 16:19

Praveen Alluri

3173 silver badges14 bronze badges

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

2 Comments

user5481714 Over a year ago

Isn't vue technically babel? That's what this led me to believe vue-loader.vuejs.org/en/features/es2015.html so why does using text/babel break it?

Derek Over a year ago

babel is a transpiler

Collectives™ on Stack Overflow

vueJS click event not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related