Managing values in Vue using v-model can sometimes lead to inconsistencies in value increment

When I try to increment or decrement the counter, my input shows a different value than what is in this.count. For example, when I increment the value, the input shows '3' but this.count === 2.

Vue.component('product-item', {
data: function () {
    return {
        count: 1  <==I want to increase/decrease this value
    }
},
methods: {
   add(by) {
        let res = parseInt(this.count) + parseInt(by);
        this.count = res;    <== this is where I do it
    }
}
template:
`<button type="button" class="countpicker-dec" @click="add(-1)" :disabled="count < 2">-</button>

<input type="number" class="countpicker-num" v-model.number="count"> <==I expect to see this.count here

<button type="button" class="countpicker-inc" @click="add(+1)">+</button>`

Answer №1

Everything seems to be working perfectly with your code, as shown below:

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: function() {
    return {
      count: 1
    }
  },
  methods: {
    add(by) {
      let res = parseInt(this.count) + parseInt(by);
      this.count = res;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">

  <button type="button" class="countpicker-dec" @click="add(-1)" :disabled="count < 2">-</button>

  <input type="number" class="countpicker-num" v-model.number="count">

  <button type="button" class="countpicker-inc" @click="add(+1)">+</button>

  <div>{{count}}</div>
</div>

Answer №2


function increment() {
   this.value += 1;
}

Why bother passing a parameter to the function if we are simply incrementing by 1?

Answer №3

In order to display the significance of this.count, follow these steps:

<p>{{this.count}}</p>

This will showcase the value that you have inputted:

<input type="number" class="countpicker-num" v-model.number="count">

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

Mishandling of string interpretation

I'm having trouble converting ANSI color codes from console output into HTML. While I discovered a script that can handle this task, I am struggling to make it parse the strings within node js properly. Even when I attempted to JSON.stringify it to in ...

What is the best way to display a component with multiple pieces of content?

I have a tool that generates card components, extracting data from a const array and displaying it in a table format within a card UI component. I am looking to add an ADD button inside each card to open a modal with input fields. However, the issue is tha ...

Does creating a form render the "action" attribute insignificant in an AJAX environment?

When submitting forms exclusively through AJAX, is there any advantage to setting the action attribute at all? I have yet to come across any AJAX-form guides suggesting that it can be left out, but I fail to see the purpose of including it, so I wanted t ...

Retrieving output from a JavaScript function

When running the code, the following logs are generated: "generating my graph" myMain.js:110 "Getting credits" myMain.js:149 "debits array is 3.9,4.2,5.7,8.5,11.9,15.2,17,16.6,14.2,10.3,6.6,4.8" myMain.js:169 "Credits data = 10.7,20.5" myMain.js:156 ...

Is there a way to determine what is affecting the properties of an element?

I've been grappling with a chunk of lengthy HTML, styles, and javascript. My mission? To uncover whatever magic is changing the text within a specific element. <span class="panel-title"> I'm a Panel with All Options</span> Transform ...

Tips for troubleshooting the error "Cannot locate module mp3 file or its associated type declarations"

https://i.sstatic.net/q4x3m.png Seeking guidance on resolving the issue with finding module './audio/audio1.mp3' or its type declarations. I have already attempted using require('./audio/audio1.mp3'), but continue to encounter an error ...

Can you explain the purpose of useEffect in React?

As a beginner in learning React, I have been able to grasp the concept of the useState hook quite well. However, I am facing some difficulties understanding the useEffect hook. I have tried looking through the documentation, searching online, and even wat ...

What are some tips for increasing your points on the journey using Here Maps?

While plotting a route, I noticed that the segments on highways are quite far apart. Is there a way to get a more detailed routing with finer points along the journey? $.ajax({ url: 'https://route.cit.api.here.com/routing/7.2/calculateroute ...

Extracting every other value from an array can be achieved by iterating through the

Hi, I'm looking to create a function that will log every other value from an array. For example, if we have: var myArray = [1,45,65,98,321,8578,'orange','onion']; I want the console.log output to be 45, 98, 8578, onion... Does ...

What is the best way to export several 'sub-components' from a single node.js module?

Here's what I mean by exporting 'sub-modules': var fibers = require('fibers'); // this is functional as the 'main' module var future = require('fibers/future'); // also operational as a 'sub' ...

Provide a random number that is not already listed in the array

I am working on creating a function that accepts an array as input, generates a random number between 1 and 10, keeps generating numbers until it finds one that is not in the array, and then returns that number. For more information and to see the code in ...

Create additional object property and include in current object's properties dynamically

I have a JSON object that looks like this: "highChart":{ "xAxis":{ "categories":[ "SYN 13 ", "Settlement", "Service Interaction", "FNOL", ...

Increase the totalAmount by adding the product each time

Can someone help me understand why the totalAmount shows as 20 when I add a product? Also, why doesn't it increase when I try to increment it? Any insights would be appreciated. Thank you. ts.file productList = [ { id: 1, name: 'Louis ...

Make an angularJS PUT request using $http

After selecting a value from the dropdown selection, I am attempting to make a PUT call in AngularJS. Although I have successfully retrieved the value from the selection, I am encountering difficulty in generating the response for the PUT call. Below is t ...

Utilizing ng-repeat, filter, and the uib-popup-datepicker to refine and display specific data within a table column

I'm currently facing a common scenario in my Angular application where I need to filter items from an ng-repeat using an HTML5 input of type 'date' or Angular-UI-Bootstrap's 'uib-popup-datepicker'. Despite extensive research, ...

Can you explain the process of invoking a Vue component from outside the instance using JavaScript?

I have developed various Vue components (such as grids, popups, layouts) using WebStorm and tools like vue-cli and webpack. My development setup involves: WebStorm + webpack + vue-cli Now I am interested in knowing how to integrate these components into ...

Bootstrap 5 dual carousel focus

I have implemented a combo carousel that serves as a timeline slider and displays 14 dates. Along with thumbnails, I am also using dates for navigation. To handle the large number of dates, I need to display them in separate rows, but only show one row at ...

What could be the reason that Vue is not evaluating anything when the directive @click is specified as "true && method"?

Consider the following scenario: LandingPage.vue <template> <button @click="handleClick">Click Me</button> </template> <script> export default { methods: { handleClick() { this.$emit("click"); } } }; < ...

Require assistance with displaying a menu on a website using JQuery

Is there a way to create a menu similar to the one shown in the image below?https://i.sstatic.net/QxNPL.png To learn more about this menu, you can visit their website by clicking on this Link. I have copied some code (HTML code and links to CSS and .js fi ...

A step-by-step guide on implementing ng-annotate to your code

Is there a way to run ng-annotate through the command line? I am attempting to combine and minify Angular, Angular Routes, and my own script.js into one file. When I use grunt uglify:app1, I encounter an injection error. While my code successfully minifies ...