Having trouble getting the click event to fire in VueJS?

I am attempting to implement a click event in Vue within a static HTML file for testing purposes, but it is not functioning as expected. The code snippet provided below contains the full code:

<!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>

Upon reviewing the checklist:

  1. The function is placed within a method object
  2. The function names are accurate
  3. The necessary library is being included
  4. Babel is specified as the type in the script tag

Despite these measures, the functionality is not working as intended. What could be the issue?

javascriptvue.js

Answer №1

This solution is effective

<html lang="en">

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

</head>
<body>

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

Modify text/babel to text/javascript and ensure your JS script follows

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The bizarre quirks of the Cypress spy() feature

I'm encountering a strange issue with my Cypress test when spying on Vue component methods. To illustrate, I've created a minimal example component. <template> <button @click="testMethod()”>Button</button> </template ...

vue.jsvuejs2cypress

AJAX request post parameters not recognized in ColdFusion form scope

I am currently developing a ColdFusion 8 training application that involves creating AJAX requests without using any libraries like jQuery. This is to support a basic CRUD application where data is retrieved and processed through various layers of the syst ...

javascriptajaxjsoncoldfusioncoldfusion-8

Deliver properties to component during Unit Test

Looking to create a unit test for my Vue-based app using vue-cli and the webpack template. After going through various Vue documentation, including vue-loader, vue-cli, and vue-template/webpack, I attempted to write a unit test for my component using the ...

vue.jsvuejs2

What is the best way to run a promise once the endpoint has responded?

Is it possible to fulfill a promise after the response has been sent to the browser without using await? I must convert a video and save the output file in the operating system. For performance reasons, I want to avoid using await. Here's an example: ...

javascriptnode.jsexpresspromise

Issue with Photoswipe pswp class Not Getting Properly Cleared Upon Closing Image

My website has a Photoswipe image gallery from . The issue I'm facing is that the CSS class does not reset or clear after closing the gallery for the second time. For example, when a user opens item 1, the images are loaded into the picture div via A ...

javascriptjquerycssajaxphotoswipe

"Calling getElementByID results in a null value being returned (see example in the provided

In my attempt to design unique buttons for a media player, I encountered a challenge. I envisioned the play button transitioning into a "loading" button and eventually into a pause button. My solution involved using 4 div elements - stop, play, loading, a ...

javascripthtmlnullgetelementbyid

Trouble arises when attempting to parse multiple objects from a JSON file using JavaScript

Encountering JSON parsing issues with multiple JSON objects. JSON data is essential for JavaScript functionality. { "name": "Sara", "age": 23, "gender": "Female", "department": & ...

javascriptnode.jsjson

When creating a new instance of a class, I make sure to use the

I am facing an issue when trying to call a function from ClassA within my mainClass, and vice versa. I have attempted using .bind() and .call(), but it only works when I use .bind(this) or .call(this) on functions, not when I try to instantiate a new class ...

javascriptnode.jsecmascript-5ecma

Incorporating jquery.prettyPhoto results in the script being displayed on the webpage

When I relocate the following script: <script src="js/jquery.prettyPhoto.js"></script> To this location: <script type="text/javascript"> ... </script> The script starts displaying on the page starting from the bold section on ...

javascriptjqueryhtmlminifyprettyphoto

The function of AJAX is to send and receive data asynchronously without

Recently, I was experimenting with AJAX. When I use echo "hello" in my PHP file, everything works perfectly. However, if I try something like echo "<script language=Javascript> alert('hi');</script>"; in the PHP file, the alert ...

phpjavascriptajax

What is the proper way to create an unordered list in vue.js?

I need assistance creating an unordered list for a series of errors I am currently printing from my console. I am utilizing vue.js and finding it challenging to grasp the concept behind implementing this feature. Below, you will find the relevant code. He ...

vue.jshtml-lists

Tips for Allowing Multiple Exports in a Vue 3 Single File Component

I am currently working on a Vue3 Single File Component for a customized list. Within this single file component, my objective is to export the main default Vue component along with an enum that declares the type of list it represents: child: <template& ...

javascriptvue.jses6-modules

The art of efficiently handling and outputting an array of files using node

In a folder filled with markdown files like so: myDir |- fileA.md |- fileB.md |- fileC.md |- fileD.md I want to extract just the filenames without the file extension and store them in an array. This is my attempt: var mdFiles = fs.readdir('myDir&a ...

javascriptnode.jsfs

Error in public build of Gatsby & Contentful site due to incorrect file paths

Encountering difficulties while attempting to deploy a Gatsby site with Contentful CMS. Development mode runs smoothly, but issues arise during the build process. Upon executing the Gatsby build command, the site is deployed successfully initially. Howeve ...

javascriptreactjsgithub-pagesgatsbycontentful

Unraveling JSON data within an AngularJS controller

I'm facing an issue with exposing a field in my AngularJS controller. The problem arises when a JSON 'owner' object is returned by a webservice, containing a field named 'Cave'. If this 'Cave' field has a null, empty, or ...

javascriptjsonangularjs

Tips for personalizing the appearance of active bootstrap tabs?

I am currently working on creating a website where Bootstrap tabs will display content according to their unique ID when selected. However, I have encountered an issue where the tab selected does not remain active. I am thinking of creating a custom active ...

javascriptjqueryhtmlcsstwitter-bootstrap

Aframe audio gap control

I am currently working on a scene that includes a looping sound: <a-assets> <audio id="ambience" src="./audio/ambient.mp3" preload="auto"></audio> <a-entity id="ambience_sfx" sound="src: #am ...

javascriptaudiothree.jsmp3aframe

Steps for creating an AJAX request to a variable defined within the local scope

I want to create a list using a JSON object that I already have stored in a variable. I have been exploring the dynatable library and its documentation on populating a table using AJAX to receive JSON data. However, I am stuck on how to make it work with ...

javascriptjqueryajaxjsondynatable

"Mastering the art of debouncing in Angular using

I am facing an issue where, during a slow internet connection, users can press the save button multiple times resulting in saving multiple sets of data. This problem doesn't occur when working locally, but it does happen on our staging environment. E ...

javascriptangularjstypescript

Maintain the property characteristics (writable, configurable) following the execution of JSON.parse()

Imagine a scenario where an object is created elsewhere and passed to my module. It could have been generated on the server in node.js, or perhaps in a different module where it was then serialized using JSON.stringify() for transmission (especially if it ...

javascriptjson