Vue component not responding to @click event

I have a Vue component where I have written a function to increase the value of likes by 1 when a button is clicked. However, this functionality doesn't seem to be working as expected. I initially tried writing it directly inside the component like this `@click="this.likes++' but that did not work. After that, I created a method, but unfortunately that also does not seem to be working. Can anyone provide assistance with this issue?

Vue.component('task-list',{
  template: '<div><button @click="ggg">click me</button>{{ likes }}</div>',
  data(){
    return{
      likes:1
    }
  },
  methods:{
    ggg(){
      this.likes++
    }
  }
});

Answer №1

Can you confirm that you're executing the steps correctly? After testing your code snippet in a sandbox environment, I found that it functions flawlessly.

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

Grab the table headings from an HTML table and store them in variables after accessing the DOM

Looking to modify the structure of the DOM. Wanting to display table content using paragraphs instead. To achieve this, I need to extract data from each row in the table. How can I accomplish this task? <table style="width:300px"> <tr> ...

Is there a way to modify my function expression without using any state variables?

Currently working on a jQuery game where the player is generated upon clicking a button. Below is the function expression I'm using to store the player's information: var getPlayerData = function() { return { name: $("#name").val(),/ ...

Show the list in a circular buffer fashion

I am working on a project that involves creating a unique UI element. In Frame #2 of my professionally designed diagram, I envision a list that functions as a ring buffer/rolodex when it exceeds four items. The list would scroll in a loop with the top and ...

Unexpected behavior with async pipe - variable becomes undefined upon reassignment

In my development process, I have implemented 2 components. One is responsible for fetching data from an external service, while the other one displays this data. The constructor of the first component is structured as follows: constructor( private dev ...

I'm looking to include an icon in my TreeItem component in Material UI 4. How

I have a unique menu created using MATERIAL UI 4, consisting of a primary TreeItem for the main menu and a secondary TreeItem for the submenu sections. I am looking to assign a specific icon to each main menu label. How can I achieve this? Additionally, ...

Encoding multiple arrays with JSON and PHP is a powerful feature that allows

I'm working on encoding my multiple news array into JSON using PHP. Here's what my news array looks like: $news[1]["header"] = "First header"; $news[1]["content"] = "First news content"; $news[2]["header"] = "Second header"; $news[2]["content"] ...

Three.js: Comparing the Process of Updating Geometries with Replacing Them

In my current project, I have a complex scene filled with objects created using the ExtrudeGeometry method. These objects need to be updated every frame, with the extrusion shape and amount constantly changing. The shapes are generated using d3's voro ...

Transition one background image into another using background positioning

Snippet of code: https://jsfiddle.net/foy4m43j/ HTML: <div id="background"></div> CSS: #background { background-image: url("http://i.imgur.com/hH9IWA0.png"); background-position: 0 0; background-repeat: repea ...

Quasar: Update default manifest by removing a parameter

In the development of my Vue.js Progressive Web App (PWA), I've noticed that Quasar generates a manifest.json file. This manifest is configured using parameters from my quasar.conf.js file: manifest: { name: `App name`, short_name: `ap ...

The collapse feature of Bootstrap 4 Navbar is unresponsive

Struggling with the Bootstrap 4 navbar collapse feature issue. In the mobile viewport, instead of collapsing, it displays items as a vertical list. Here is the code snippet: <html> <body> <!-- Navbar --> <nav class="navbar na ...

Sharing data from JavaScript to view in Rails: A step-by-step guide

After clicking the submit button, the controller renders with JSON data. The JSON data is {notes: array[1], array[2]}. The next step is to render the view.html.erb file. How can the values in notes be displayed like <%= notes %> in this file? ...

Transform ajax functionality into jquery

I need help converting an AJAX function to a jQuery function, but I'm not sure how to do it. function convertToJquery() { // Create our XMLHttpRequest object var hr = new XMLHttpRequest(); // Set up variables needed to send to PHP file var ur ...

Issues arise when attempting to instantiate an object within a forEach loop in JavaScript

I've been working on creating a JSON object using data pulled from a MongoDB database. The issue I'm facing is that the last line res.status(200).json(userData) seems to send a response before the data processing is complete, resulting in an emp ...

Looping through multiple AJAX calls

I have come across numerous questions on this topic, but I am still struggling to find a solution that will make my code function correctly. There is a specific function for calling AJAX that I am unable to modify due to security restrictions. Here is how ...

Tips for retrieving a variable from an XML file with saxonjs and nodejs

I came across an xml file with the following structure: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE agent SYSTEM "http://www.someUrl.com"> <myData> <service> <description>Description</description> < ...

Tips for generating Sequelize models dynamically in NodeJS 14 using Sequelize version 6

My project relies on Node and Sequelize for its backend operations. Everything was smooth sailing until I decided to update both Node and Sequelize to their latest versions. Although I could revert back to the older versions, I'm hesitant because my o ...

Implementing an automatic table data update with Ajax, Json, and Node.js

I am currently utilizing Node.js on the server-side with Express and Twitter Bootstrap on the front-end. The webpage features a dialog box with a form and a submit button; the form is submitted using a jQuery Ajax call to prevent page reload after receivin ...

What causes React JS to continuously render in an infinite loop when using hooks and useState

I am struggling with updating the current state of my component based on a result using a custom hook in React. Whenever I try to update it, I end up in an infinite loop rendering due to my usage of the useState() hook. I am still new to working with Rea ...

Exploring the functionalities of can-deactivate without incorporating routing

I'm facing an issue with a parent component and multiple child components. The parent component contains a form, while each child component also has its own form. Unfortunately, all child components share the same route as the parent component and hav ...

Encountered the error 'unable to read property 'then' of undefined', even though a Promise was returned

I'm encountering a common issue that has me stumped. The problem arises when I attempt to call a function that makes a GET request, processes the returned JSON, and then returns a Promise. When I try to print the parsed JSON data using this Promise, ...