JavaScript payload object's name

Here is the data I have received.

{name: "Sinto 6", val: {…}, line: "Sinto 6"}
line: "Sinto 6"
name: "Sinto 6"
val:
AvgMachTime: 253
AvgManTime: 1343
CollectMachTimer: 359
CollectManTimer: 108
CycleTimeMach: 359
CycleTimeMan: 140
FaultTime: 15297
MachTargetSeconds: 330
ManTargetSeconds: 95
NGPartCount: 63
OnHeatTime: 11201
PartCount: 12
PartTarget: 78

I'm attempting to update the state values using Vue.js like this:

const PERFORMANCE_COMMIT = (state, payload) => {
Vue.set(state["Performance"][payload.line], [payload.val], payload.val);
}

I have recognized that one of the values in my payload.val should be the identifier of the value rather than the name itself. How can I accurately reference this?

This is how my current state is structured:

Performance: {
    TotalPartTarget: 0,
    TotalPartCount: 0,
    Difference: 0,
    OEE: 0,
    OEETarget: 100,
    "Sinto 6" :{
      PartTarget: 0,
      PartCount: 0,
      NGPartCount: 0,
      OEE: 0,
      FaultTime: 0,
      OnHeatTime: 0,
      CycleTimeMan: 0,
      CycleTimeMach: 0,
      CollectManTimer: 0,
      CollectMachTimer: 0,
      AvgManTime: 0,
      AvgMachTime: 0,
      ManTargetSeconds: 0,
      MachTargetSeconds: 0

Edit: Corrections made on spelling errors

javascriptvue.jsobject-reference

Answer №1

According to the Vue documentation (Link to Vue.set Documentation), the first parameter represents the target, the second parameter is the property name/index, and the third parameter is the value.

In your scenario, the target property is state["Performance"], the property name is payload.line ("Sinto 6"), and the value is payload.val.

const PERFORMANCE_COMMIT = (state, payload) => {
  Vue.set(state["Performance"], payload.line, payload.val);
}

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

Loading objects with textures in Three.js using the objloader

For the past few weeks, I've been diving into Three.js and managed to successfully apply a texture to a cube I created directly in the code. However, when I attempted to load an OBJ file using OBJLoader, I ran into issues trying to load simple png or ...

javascriptthree.js

An unexpected issue occurred while converting XML data into JSON format

I have been using a piece of code that converts XML to JSON: // Converting XML to JSON var XmlToJson = function xmlToJson(xml) { //console.log('called xmltojson'); //console.log(xml); // Creating the return object var self = this ...

javascriptjsonxml

Can you explain the role of the faceVertexUV array within the three.js Geometry class?

Currently, I am utilizing three.js to create curved shapes using parametric functions. Within the THREE.js javascript file, there is a function called THREE.ParametricGeometry that continuously adds 2D vectors to the faceVertexUvs array. I am curious abo ...

javascriptthree.jsuv-mapping

Unable to toggle Bootstrap 5 tabs in a Nunjucks template - the issue persists

I have been following the bootstrap documentation for tabs which can be found at this link After referencing the documentation, I replicated the sample implementation in my code as shown below: --- title: Portfolio description: Portfolio --- {% exten ...

javascripthtmlcssbootstrap-5nunjucks

Is there a way to inform the List component when the height of its row items has been altered in order to trigger a rerender

In my project, I am using a react-virtualized List where each item in the rows has an expand button. When this button is clicked, the row's height changes to reveal more information. The problem I am facing is that after clicking the button, the inne ...

javascriptreactjsnext.jsreact-virtualized

What is the reason Node.js only prints one item at a time?

Currently, I am using node.js to extract items from a text file. Right now, the code prints out the items in the terminal, but I want it to be able to accept multiple parameters and print each of them individually instead of just the last one. // Checki ...

javascriptnode.jsterminal

Is there a method to refresh the entire DOM-based location without having to reload the browser window?

Is it possible to achieve smooth asynchronous page transitions without breaking existing JavaScript animations in a system like Webflow? I'm struggling to find a way to present new elements to the DOM without disrupting the animations that are already ...

javascriptajaxanimationdomwebflow

What is the option for receiving automatic suggestions while formatting components in a react.js file?

When styling elements in our app using app.css or styles.css, VS Code provides auto-suggestions. For example, if we type just "back" for background color, it will suggest completions. However, this feature does not work in react.js or index.js. Why is that ...

javascripthtmlcssreactjs

Would it be a security risk to share the Stripe charge ID and connected account ID with clients on the frontend?

I am currently making an ajax call to my backend and I am unsure whether it is secure to reveal the charge id and the connected account id on the client side. Just to clarify, there are no secret keys or sensitive information stored in the browser. Your ...

javascriptnode.jsajaxstripe-payments

Ways to avoid encoding Unicode characters in JavaScript programming

When I retrieve data from an API, I receive a STRING like this: [ { "reason": "Invalid address", "email": "j\u00c3\u00a9r\u00c3\u00b4mel\u00c3\u00a4ufer@com" }, { "reason": "Invalid address", "email": ...

javascriptjsonunicodesendgridkoa

Do we need to utilize a server folder in Nuxt 3 if we have API endpoints?

In Nuxt 3, there is a dedicated server folder containing an api subfolder. Why should we utilize this when we already have API endpoints built with a server-side programming language like Laravel? Are they linked in any way? For instance, consider these ...

javascriptvue.jsvuejs3nuxt.jsnuxt3

Applying background-image in ngStyle results in an undefined value

I have been attempting to incorporate images (retrieved through an API) as the background-image of an element. However, I keep encountering the error message Cannot read property 'url' of undefined, even though the URL is actually being rendered. ...

javascriptangulartypescriptangular5

Utilize Express Node to display API information on HTML pages using Handlebars template

I'm seeking assistance in rendering data from an API to HTML using handlebars. I'm a bit puzzled on how to properly showcase the data on the webpage. Here's what I have so far: ROUTES FOLDER/FILE: const express = require('express&ap ...

javascriptnode.jsexpresstemplateshandlebars.js

The server sends a response with a MIME type that is not for JavaScript, it is empty

I am trying to integrate an angular application with cordova. Upon running "cordova run android" and inspecting it in Chrome, the console displays the following message: "Failed to load module script: The server responded with a non-JavaScript MIME t ...

javascriptandroidangularcordovamime

What steps should be followed to construct a window identical to the one depicted in the attached image using HTML and CSS?

Check out this link to see the window style I'm trying to recreate using HTML, CSS, and Javascript. No Jquery needed. Thank you in advance. ...

javascripthtmlcss

I am experiencing an issue where the position of the value in the returned response array keeps changing after an Ajax request is made. How can

I am currently using a script that sends an array of numbers through Ajax to a web server. These numbers are then used to query a database, and the corresponding values from the table are sent back. I then display these values in respective divs within my ...

javascriptphpajaxjquery-deferred

Error: 'error' is undefined

Error Alert: The code is encountering a ReferenceError, indicating that 'error' is not defined in the following snippet: app.post('/register', function(req, res) { var hash = bcrypt.hashSync(req.body.password, bcrypt.genSaltSync(10)) ...

javascriptnode.jsexpress

What could be causing Django REST Framework to block non-GET requests with a 403 Forbidden error from all devices except for mine?

Currently in the process of developing a web app using a Django REST Framework API. It runs smoothly on the computer where it was created (hosted online, not locally), but when trying to access the website from another computer, all GET requests work fine ...

javascriptpythondjangoreactjsdjango-rest-framework

The Bootstrap image slider is limited to showing a single item at a time

I've been attempting to implement a carousel in Bootstrap 4 that displays multiple items at once and allows scrolling one item at a time, but I can't seem to get it right. Despite going through various tutorials and forum posts, the carousel alwa ...

javascriptjquerymodel-view-controllerbootstrap-4carousel

Efficiently managing modules with requirejs and Backbone.Marionette

After organizing the file structure of my web app, utilizing RequireJs and Backbone.Marionette, it now looks like this: |- main.js |- app.js |- /subapp1 |- subapp1.js |- subapp1.router.js |- /subapp2 |- subapp2.js | ...

javascriptbackbone.jsrequirejsmarionette