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 as in the order of the script tag? I moved the script tag below anchor with same result. Console does not log. — kawnah
Wrap the A in a div with ID filter and then remove the filter ID from anchor tag — Derek Pollard

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

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

vueJS click event not working

1 Answers