A guide on combining two counters in Vue to create a unified value

Is there a way to track the number of times two buttons are clicked individually as well as together?

<div id="app">
    <p><button v-on:click="counter1 += 1">Add One More Click</button></p>
    <p><button v-on:click="counter2 += 1">Add One More Click</button></p>
    <p>The total clicks on both buttons: {{ counter1+counter2 }} times</p>
    <p>Button 1 has been clicked: {{ counter1 }} times</p>
    <p>Button 2 has been clicked: {{ counter2 }} times</p>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            counter1: 0,
            counter2: 0
        }
    })
</script>

I'd love some help in achieving this functionality using vue!

Answer №1

The issue with your code is that you are trying to increment `counter1` and `counter2`, but these variables are not defined in your code. Instead, you have `button1` and `button2`. Aligning the names of the variables should resolve this error.

One alternative approach would be to use a `computed` property to handle the addition of `counter1` and `counter2` within the template.

For example:

var app = new Vue({
  el: '#app',
  data: {
    counter1: 0,
    counter2: 0
  },
  computed: {
    totalClicks() {
        return this.counter1 + this.counter2;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p><button v-on:click="counter1++">Add One More Click</button></p>
  <p><button v-on:click="counter2++">Add One More Click</button></p>
  <p>Total clicks: {{ totalClicks }}</p>
  <p>Button 1 clicks: {{ counter1 }}</p>
  <p>Button 2 clicks: {{ counter2 }}</p>
</div>

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

Utilizing jQuery to dynamically load content that relies on javascript within a specified div

I came up with a function that can easily add floating resizable content to a webpage: function AddFloatingWindow(id) { var window = document.createElement('div'); $(window).attr('id', id); $(window).height(100) ...

Could JSON be improved for better space efficiency, or is this the standard format?

Within my code, I am using var team = <?php echo json_encode(get_results("SELECT id,name,title,bio,sord,picfn FROM mems ORDER BY sord")); ?>; This code generates a JavaScript array of objects like: var team = [{"id":"1","name":"somename1","title": ...

Filtering MUI Data Grid by array elements

I am in the process of developing a management system that utilizes three MUIDataGrids. Although only one grid is displayed at a time, users can switch between the three grids by clicking on tabs located above. The setup I have resembles the Facebook Ads ...

When large spheres meet, Three.js/WebGL displays them as fractured

I must admit that I am not very experienced with 3D graphics. Issue In my WebGL model using Three.js, I have intentionally made two spheres collide. However, when the spheres are extremely large, they appear "broken" at the point of intersection, whereas ...

Tips for managing the background color of a box when the function is constantly refreshing in Internet Explorer

function process(Objects) { var objectId = Objects; displayContent(objectId); } function displayContent(objectId) { var boxId = objectId.id; var color = ret ...

Exploring the process of traversing a function for each ng-repeat element

Hey everyone, I'm currently facing an issue where I need to pass each date through a function in order to get the desired result. Let's take a closer look at the code snippet: <md-list> <md-divider ></md-divider> ...

Creating dynamic class fields when ngOnInit() is called in Angular

I am trying to dynamically create variables in a class to store values and use them in ngModel and other places. I understand that I can assign values to variables in the ngOnInit() function like this: export class Component implements OnInit{ name: st ...

Loading JavaScript on a different page using AJAX is not possible

Why is it that AJAX can load HTML, CSS, PHP, etc., but not JavaScript files when using JavaScript? Does AJAX have limitations in this regard? If so, how would one go about loading another HTML page that contains JavaScript with AJAX? Here's a simple ...

Loop variables undergoing change

I am currently working on a loop that fetches data from an API and then processes it to populate a simple array with the retrieved information. Promise.all(promises.map(obj => API.functionName(obj))).then((response) => { var index = startingDate; ...

Top solution for efficiently capturing and storing user input in a React JS application: Event Handler

I've recently designed an input field for inputting details of items. In order to effectively capture and save the entered information, which of the following event handlers would be most suitable? onClick onChange onLoad onKeyPress ...

Having trouble with jsPlumb accurately rendering lines

http://jsbin.com/ofapew/1/edit I am currently experimenting with jsPlumb to connect two points, specifically trying to link the green dots to the top of a black border box. One thing that is puzzling me is that even though the green dot end point appears ...

Creating multiple tabs in PHP using the header function can be achieved by specifying the location in

I am attempting to open a new tab using Php code: header("location:print_register.php?recpt_no=".$recpt_no); In addition, I would like to open two tabs programmatically with the following code snippet: header("location:print_register.php?recpt_no=".$rec ...

At times, the Kendo UI Tooltip may linger on screen longer than expected, failing to disappear as

I've been experimenting with this issue for quite some time now, but I'm stumped. Whenever I quickly move my mouse cursor over a series of links, occasionally a tooltip will linger on the screen even after the cursor has moved away from the link. ...

Unable to move draggable table rows in vue.js

I recently utilized vue.js 2.0 to create a draggable table leveraging the capabilities of Vue.Draggable. Even though there are no visible errors, I encountered an issue where dragging tr elements does not work as expected. Interestingly, when trying to dra ...

Encountering a 500 error while trying to access a different file using the .get()

My current project involves setting up basic Express routing. However, every time I try to fetch data in order to link to a new page on my website, I encounter a 500 error. The main file managing the routing is Index.js. The content of Index.js: var expr ...

When setting a value through the DOM, the input's value bound with ngModel in Angular does not get updated

Trying to upload a file to calculate its hash and display it in an input box. If done correctly, the value should show in the form, but when submitting the form, the value does not get sent. Only adding a blank space by clicking on the input field works: ...

Optimal method for organizing individuals into teams using Google Apps Script

There are approximately 200 individuals in this particular department. Our goal is to form groups of 4, with each group consisting of members from different teams based in the same city. Each group must have one driver and three non-drivers, all sharing si ...

What is the purpose of using async/await in Node.js when it is inherently asynchronous, and in JavaScript as well, vice versa?

Apologies for my lack of experience in Javascript and NodeJS. I'm a total beginner, so please excuse my silly questions. I've been trying to wrap my head around the concept but haven't found a clear explanation. Here's what's conf ...

Show various Bootstrap Alert Messages based on the type of error detected?

Trying to figure out how best to explain this, here it goes! I am working on a website and I want to incorporate alert messages. Check out some examples here. Depending on the form inputs, I need different alerts to be displayed. PHP will validate the in ...

Angular can be used to compare two arrays and display the matching values in a table

Having two arrays of objects, I attempted to compare them and display the matching values in a table. While looping through both arrays and comparing them by Id, I was able to find three matches. However, when trying to display these values in a table, onl ...