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

What is the correct way to integrate a HTML/CSS/JS theme into a Vue project effectively?

As a newcomer, I recently acquired a bootstrap theme that comes with HTML, CSS, and JavaScript files. My goal now is to integrate this theme into Vue in order to make it fully functional. The challenge I am facing is how to successfully incorporate the the ...

React: the function is returning as undefined

Description I am encountering an issue with a function in a functional component, as it keeps returning undefined. Despite having all the necessary data defined and accurate within the function including tableData and subtractedStats. This seems to be a ...

Styled-components does not generate a style tag as output

After creating a new project in React with Webpack, I decided to experiment with Styled Components. In my index.js file, the code is structured like this: import React from "react" import ReactDOM from "react-dom" import Page from "./site/Page" import s ...

Label positioning for checkboxes

Is there a way to display the checkbox label before the actual checkbox without using the "for" attribute in the label tag? I need to maintain the specific combination of the checkbox and label elements and cannot use nested labels or place other HTML elem ...

I'm having trouble getting my bot command handler to function properly

When it comes to my command handler, the commands function properly. However, when I attempt to include arguments like $user-info @user instead of just $user-info, it returns an error stating that the command is invalid. Code //handler const prefix = &ap ...

Tips for preserving the integrity of square brackets while extracting data from JSON

Everyone: We've decided to utilize Newtonsoft JSON.NET for serializing some C# POCOs, and here's what we have: { "RouteID": "123321213312", "DriverName": "JohnDoe", "Shift": "Night", "ItineraryCoordinates": [ [ 9393, 44 ...

Transforming the NavBar in React: A guide to dynamically updating values

I am facing an issue with my NavBar that changes based on certain events. The current setup works fine, but I don't want to render it in every class that loads a new page. Initially, I had the NavBar rendering inside App.js so it could appear on all p ...

Nuxt - Auth module: Securely authenticating server-side requests

On a specific page, there is a requirement to load user-specific data using the fetch() hook. What is the process of accessing the authentication token on the server side in order to include it in this request? ...

Strange response received from $http GET request on Android device running Crosswalk

I am attempting to retrieve data in JSON format from an API using AngularJS. The process is successful on iOS and desktop browsers, but I'm encountering a strange response when trying it on my Android device. The request code looks like this: $http({ ...

Sliding carousel from right to left

I'm currently working on setting up a slick carousel to continuously scroll, but I need it to move in the opposite direction. Despite trying to add the RTL option, I couldn't get it to work as intended. Check out my Fiddle here (currently scroll ...

What is the method for retrieving a JSON type object property that is stored inside a data object in a Vue template?

I am facing an issue with retrieving data from a Vue.js app object. data() { return { group1: { id: 'qd4TTgajyDexFAZ5RKFP', owners: { john: {age: 32, gender: 'man'}, mary: {age: 34, gender: 'wom ...

JS editing an array in a datatable

I have created an HTML page where users can enter data, which is then uploaded to a SQL server. I have been studying DataTables to load an array into a table and tried editing it, but still haven't had success. Can anyone offer assistance? var array ...

Is the mergJSON feature not working in a LiveCode Standalone application?

I've encountered an issue with the mergJSON external in LiveCode. Everything works smoothly in the IDE, but when it comes to the standalone application, things seem to fall apart. I'm running LiveCode 6.0.1 Community Edition on Mac OSX 10.8.3 wit ...

Setting a default value in the <v-select> component: A handy guide

After setting up a select component like this: <v-select px-4 class='select' v-model="form.accountType" :items="accountTypes" :label="$t('form.accountType')" :rules="[rules.required, rules.validAccountType]" ...

What steps can be taken to ensure that any new elements generated by JavaScript do not disappear upon refreshing the page

I am currently working on a project where I am creating a list by collecting user information and storing it in a MySQL database. When the user clicks the 'add' button, a new element is added to the bottom of the existing list which is coded in H ...

What is the best way to transfer variables between PHP and an external JavaScript file?

I need to transfer 2 variables (which store data for a chart) to an external JS file that contains the chart settings. In my PHP code, I have: <script type='text/javascript'> var final_values = '$final_values'; var final_names = ...

Challenges encountered with the "load" event handler when creating a Firefox Extension

I am currently troubleshooting a user interaction issue with my Firefox extension. The tasks that my extension needs to complete include: Checking certain structures on the currently viewed browser tab Making backend server calls Opening dialogs Redirect ...

Utilizing Jquery tabs for consistent height display

Currently, I am utilizing jquery tabs for showcasing various content. This is what my functions look like: $(function() { $( "#tabs" ).tabs(); }); I attempted to ensure all tabs have the same height by using this approach: var heightStyle = ...

I have an empty array that needs to be filled with numbers

Currently, I am facing a challenge where I have an empty array and need to insert numbers from 1 to 20 into it. Once that is complete, the next step is to calculate the total sum of all these numbers. The stumbling block I am encountering lies in this sect ...

The issue of the Ajax beforeSend function not triggering at times, causing a delay in displaying the bootstrap progress

I'm experiencing issues with my Bootstrap tabs and the progress bar not consistently showing up. I have 3 tabs, each displaying query results in a table. Whenever the search button is clicked or a tab is changed, an ajax call triggers a function with ...