Making changes to an input field can impact other elements when using the v-model directive

I am facing an issue with a cart setup where the quantity of all products are being updated when I increase the quantity of one product. How can I prevent this and only update the quantity of the selected product?

<div v-for="(product, index) in cartProducts" :key="index">
          <li>{{product.description}}</li>
          <input type="number"  v-model="quantity">
          <img src="imageurl" height="150">
          <br>
          <button type="button" class="btn btn-sm " disabled>{{product.price }}</button>

        </div>

Vue data Property

data () {
    return {
      quantity: 1
    }

Answer №1

To ensure individual quantities for each product, include a quantity field in the product and establish a binding to it:

<input type="number"  v-model="product.quantity">

Answer №2

To assign a quantity to each product using .map :

this.cartProducts.map(function(item){
   item.quantity = 1;
   return item;
});

In your HTML, use the following code :

<input type="number"  v-model="product.quantity">

For example, check out this JSFiddle link

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

Convert epoch time to HHMM format using JavaScript

I have a specific variable that stores epoch time data. My goal is to showcase the time information in HHMM format. Below you can find the code I am currently using; function convertEpochTimeToDateObj(epoch_time) { var utcSeconds = epoch_time; va ...

Is it recommended to use separate Controllers for each tab in Angular JS to load the pane?

Recently delving into the world of Angular JS and eagerly seeking expert advice and suggestions. Would it be advisable to use separate controllers for initializing each Tab to load the Pane content? Is assigning separate controllers a recommended approac ...

Encountering a "Cannot read property 'protocol' of undefined" error when attempting to implement a search bar with Laravel and Vue JS using the Vuetify Framework

Currently, I am working on creating a search bar using Laravel and Vue JS with the Vuetify framework. Below are my controller functions: /** * Retrieve names and references of all projects for the user. * * @param \Illuminate\Http\Reques ...

Verify if a username is available using jQuery

When trying to register, I use this function to check the availability of a username. If the username already exists, the submit button is disabled. The check is done using a php script that queries the database for existing usernames. Everything works per ...

Transforming jQuery Object into a String after making an AJAX request

If I were to submit a form with some text in the value of user_input, let's say "I am free," through AJAX, and it comes back to me as a string. Once it becomes an Object, how could I convert it back into a string format? Thanks, <!DOCTYPE HTML> ...

Does anyone have any sample code on processing JSON data from a URL using Modified JavaScript Value in Java?

Could anyone provide some examples on how to handle returned Json data using Modified JavaScript Value? Here is the specific data I require from the json url: { "result": { "data": [ { "name": "page1", "period": "dia", "values": [ { "value": 4, "end_time" ...

What sets apart an exception from a promise left unfulfilled?

As I delve into the topic of error handling, I came across an interesting concept in my reading material. The literature explains that if a throw statement occurs within a Promise's catch function, it is considered a rejection. It draws a distinctio ...

Moving from one section to the next within a web page

I am looking to add animation to my web app. When clicked, I want to move only the ID table column from one div to another div while hiding the other column. However, I am struggling with figuring out how to animate the movement of the ID column (from the ...

The protection ensured by employing an extensive hash in the query string for the recognition of a changing document

I am currently developing a small web application that creates exercise program printouts. The concept is simple - a user like a personal trainer can craft an exercise regimen and send it to their client via email using a unique link. http://www.myurl ...

Guidelines for accessing the Coinbase exchange API from a localhost

Following the instructions in the Coinbase Cloud documentation, I tried running this code on the client side using JavaScript: const options = { method: 'GET', headers: { Accept: 'application/json', 'cb-access-key&ap ...

Retrieve data in the parent component as new data is added in the child component in Vue, without relying on a watcher

Is there another way in Vue to automatically display updated data without using a watcher? Similar to React's useEffect that triggers a render when the data changes. I'm looking for an alternative that doesn't require dedicated resources to ...

What could be causing the jQuery effect to not function properly?

After completing a course on Codecademy, I successfully ran the code. However, I prefer to copy and paste the code into my own jquery folder for future reference and practice. The objective of this project was to make the element 'krypton' bounc ...

Tips for securely authenticating between domains within an iframe without relying on third-party cookies

This project utilizes a PHP/Vue.js setup to enable clients to seamlessly integrate our service within an iframe window. Due to the tightening restrictions on third-party cookies, ensuring user security, particularly in Safari, has become more challenging. ...

Is there a way to retrieve the Boolean value from an ng-show attribute without having to re-evaluate the expression?

I'm currently working on a project that involves displaying and hiding a lot of content dynamically using ng-show. Some of the expressions being evaluated are quite lengthy, like this... <div ng-show="some.object.with.nested.values && ...

Ensure that my program is halted until the xmlhttprequest has completed

It seems like I've overcomplicated this problem for myself. In my page, I have 2 XMLHTTPRequests - the first request retrieves data from an API and fills my elements with this data. However, one of the fields in my elements requires a second request t ...

Transmitted only JSON data instead of using multiform data with jQuery Ajax

When I use jQuery Ajax to send a JSON object, it ends up being interpreted as 'multiform' instead of pure JSON. How can I make sure my request is sent as a pure JSON object and not multiform? var demo = new Array("One", "Two", "Three"); $.ajax ...

ng-if not functioning properly following the activation of the "Save Changes" button

When I click the edit change button, I am updating information and then hiding the form to show the updated details by clicking on the Save Changes button. My API successfully updates the information, but for some reason, ng-if does not seem to work afte ...

Issue with nested directive not triggering upon page load

I recently started working with AngularJS and came across an issue with nested directives. In my project, I have two directives: MainDir.js (function(){angular.module("mod").directive("mainDir", function(){ return { restrict: "E", scope: {}, ...

Ways to exit the current browser window?

Is there a way to close the current browser window using JavaScript or another language that supports this functionality? I've tried using the window.close() function, but it seems to only work for windows opened with window.open(). Thank you in adv ...

Steps to display the datatable footer on the printed page

I am having trouble understanding the solutions provided for my table query. The current table setup is as follows: <table class="table table-bordered make_datatable"> <thead> <tr> <th>SL No</th> ...