Updating an Object in vue.js Upon Click Event to Add a New Value

I currently have a code snippet that looks like the following:

arr = [
  { val1: a, val2: b },
  { val1: a, val2: b },
  { val1: a, val2: b } 
]

<div v-for="single in arr">
  <button v-on:click="addSome"></button>
</div>

When I click on a button within the loop, I would like to add 'val3': 'c' to the corresponding object. I have tried using $add, $set, passing the current 'single', and $index without success. What is the correct method to add or edit a specific object from the loop? Apologies for any language barriers, thank you for your help!

Answer №1

Consider implementing the following code snippet:

<div v-for="item in list">
  <button v-on:click="updateItem($index)"></button>
</div>

Next, add this method to your script:

...
"updateItem": function (i) {
    Vue.set(this.list[i], "value", "updated");
}
...

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

How come the data I send gets converted to Undefined when working with Tabulator?

I am currently facing an issue with integrating JSON data as search results into my Tabulator. The goal is to display these search results in their respective columns within the Tabulator. Here is the code snippet I have implemented: <body> <div ...

Enable the jQuery UI Autocomplete feature with Google Places API to require selection and automatically clear the original input field when navigating with the

I am currently using a jquery ui autocomplete feature to fetch data from Google Places... The issue I am experiencing is that when the user navigates through the suggestions using the up and down arrows, the original input also appears at the end. I would ...

Creating a realistic typewriter effect by incorporating Code Block as the input

I am looking to add a special touch to my website by showcasing a code segment with the Typewriter effect. I want this code block not only displayed but also "typed" out when the page loads. Unfortunately, I have been unable to find a suitable solution s ...

javascript display hide choose among

I am attempting to display another set of options when the user selects a specific item. For example, if the user selects "Products," then a new selection box should appear with different product types. See my code below: <html> <head> <m ...

How to nullify the valueChanges pipe in Angular RxJS until the observable is resolved

A challenge I am facing is piping the valueChanges from a select element to trigger the appropriate API request and displaying a spinner until the response is received. Additionally, I am trying to utilize publish() and refCount() methods so that I can use ...

Ajax request experiencing 500 Internal Server Error. Uncertain about the source of the issue

I'm encountering a 500 Internal Server Error and I'm struggling to pinpoint the root cause of the issue. The purpose of this request is to delete a comment with a specific id from the database. The id is passed through a hidden input field. Below ...

Encountered an unhandled runtime error: TypeError - the function destroy is not recognized

While working with Next.js and attempting to create a component, I encountered an Unhandled Runtime Error stating "TypeError: destroy is not a function" when using useEffect. "use client" import { useEffect, useState} from "react"; exp ...

Verification upon button press for a form

Currently, I have a form with multiple textboxes that are being validated using the Required Field Validator. However, there is also a captcha control that is not getting validated. I can validate it using JavaScript though. At the moment, an alert pops u ...

Testing API functionality with the Selenium tool

As someone new to API testing, I am looking to integrate one specific flow of an API using Selenium while the rest of the GUI is already in place. When accessing the API URL on a client browser, I receive the expected JSON format result. Similarly, when us ...

A step-by-step guide to thoroughly examining the form status in a React application, allowing for the activation of a previously disabled submit button

When I have an onChange event in React, the state is populated correctly. I disable the form button when a field is empty on submit, but I also want users to be able to go back and fill out those fields. The key issue is that if both fields have data, I wa ...

What is the correct way to implement fetch in a React/Redux/TS application?

Currently, I am developing an application using React, Redux, and TypeScript. I have encountered an issue with Promises and TypeScript. Can you assist me in type-defining functions/Promises? An API call returns a list of post IDs like [1, 2, ..., 1000]. I ...

Using Vuetify to create a dynamic datatable populated with data from an

I am currently facing an issue with populating a datatable using an axios call. Even though the data is present in the table when inspected, it is not visible to the end user on the site. Can anyone offer any insights into what might be going wrong here? ...

Leveraging Ajax with PlayFramework Results

As stated in the PlayFramework Document 2.0 and PlayFramework Document 2.1, it is known that Play can return various responses such as: Ok() badRequest() created() status() forbidden() internalServerError() TODO However, when trying to send a response wi ...

Transform JSON object array into a different format

Can anyone help me with an issue I am facing with checkboxes and arrays in Angular 2? I have checkboxes that capture the value "role". Each role is stored in an array called "selectedRoles". However, when I try to console.log this.selectedRoles, I get str ...

The validation using regex is unsuccessful when the 6th character is entered

My attempt at validating URLs is encountering a problem. It consistently fails after the input reaches the 6th letter. Even when I type in "www.google.com," which is listed as a valid URL, it still fails to pass the validation. For example: w ww www ww ...

"Combining three tables to generate a single output: a step-by-step

I am struggling with the SQL statement below where I am trying to join 3 tables and get a single output. Unfortunately, although there are no errors, it is not displaying the output I desire. $sql = "select distinct(sales_table.sales_id), trades_table ...

Arranging unrelated divs in alignment

http://codepen.io/anon/pen/Gxbfu <-- Here is the specific portion of the website that needs alignment. My goal is to have Onyx Design perfectly aligned with the right side of the navbar, or to have the navbar extend up to the end of "Onyx Design". The ...

Optimal techniques for utilizing Redis with JSON data

Previously, I stored JSON data in Memcache and then read and iterated through it. Now, what would be the best practice for achieving this with Redis? Should I store the JSONs or use SETS? ...

Tips on how to dynamically load the content of a URL into a modal and update the browser address simultaneously

I am attempting to achieve a specific effect using JavaScript and jQuery Link to the content I want to load in a modal The goal is to load the content in a modal while keeping the main page in the background. Additionally, when a URL is followed, I want ...

Ignoring capitalization, search for occurrences in a jq document

Is there a case-insensitive matching support in JQ? Here is the filter in question: .user | contains("thinking") Along with the JSON data: { "id": "1338268256814161923", "user": "Thinking of going through t ...