Setting a Vue property on an object

I am currently working on a component that needs to append a property to an array. Here is the initial array structure:

  [
    {
      date: "17/11/2020",
      dateTime: false,
      hour: "00",
      minute: "00",
    },
  ];

The component features a button:

      <b-button
        class="p-0"
        variant="success"
        @click="addTime(array)"
      >
        + Add more times
      </b-button>

My goal is to have each click on the button add a "time" property in the following format:

       [
         {
           date: "17/11/2020",
           dateTime: false,
           hour: "00",
           minute: "00",
           time: [
             {
               defaultDateStart: "08:00",
               defaultDateEnd: "00:00"
             },
             {
               defaultDateStart: "08:00",
               defaultDateEnd: "00:00"
             },
               //etc....
           ],
         },
       ];

Is this achievable? I've attempted to use .push() in the click method without success...

javascriptarraysvue.jsobject

Answer №1

To create your object, follow this structure:

let itemList = [
  {
    name: "Item A",
    quantity: 2,
    price: "$10",
    total: []
  }
];

In the addToTotal function, add the item like this:

addToTotal(item){
  // item = {name: "Item B", quantity: 1, price: "$5"}
  itemList[0].total.push(item)
}

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

Set iframe scroll to match the height of the user's screen resolution

Can the height of an iframe scroll be adjusted to match the size of the screen (browser)? Essentially replacing the default browser scroll with the iframe scroll. Here's what I'm looking to achieve: Currently, my browser scroll is disabled: < ...

javascripthtmliframe

Error message displayed when attempting to send emails through an HTML form obtained from a complimentary template site

Currently, I am in the process of learning to code basic websites but I'm facing some challenges with getting the contact form to function properly. I decided to work with a free template that can be found at this link: and uploaded it to a shared ho ...

javascriptphphtmlcontact-form

Arrange the array in such a way that each record is unique until it contains multiple distinct values. Any remaining values can be repeated as needed

Looking for a way to rearrange an array so that each value appears only once before repeating. Array ( [0] => 1 [1] => 1 [2] => 1 [3] => 1 [4] => 1 [5] => 2 [6] => 2 [7] => 2 [8] => 4 [9] => 4 ) The desired outcome is as fo ...

phparrays

When developing in vue.js and preparing for production, I encounter a 404 error with certain files located within the static folder, despite the fact that the URLs are accurate

As I prepare my application for production, I have encountered an issue. While everything works perfectly in the development environment, upon building and uploading the application to the server, only the HTML, Javascript, some CSS, and a few files load. ...

webpackvue.jsthree.js

Leveraging the power of cannon.js for detecting collisions within a three.js gaming environment

Trying to figure out a way to handle collisions between objects in my three.js project. Considering using cannon.js for its support of necessary primitives, but don't always need all the physics overhead, just collision detection in many cases. Don&ap ...

javascriptthree.jscollisionphysijscannon.js

Determining the output of a retrieved string using Ajax with JQuery

I am currently working on a web service that adds an item to the database when called using JQuery Ajax. The issue I am facing is that the web service returns a string, but I am unable to extract only the string part from the returned data. Instead, I am g ...

javascriptjqueryjsonajax

Ajax Syntax Error: Unexpected Token U

I have been struggling all day with an issue while trying to send json data via ajax to Express. Here is how my ajax code looks like: $('#saveClause').click(function () { var username = document.getElementById('postUserName').inne ...

javascriptjsonajaxexpress

Every time I switch views using the router in vue.js, my three.js canvas gets replicated

After creating a Vue.js integrated with three.js application, I encountered an issue with the canvas getting duplicated every time I opened the view containing the three.js application. The canvas remained visible below the new view, as shown in this image ...

javascriptvue.jsvuejs2three.jsvue-router

Can Angular be used to send form data to an external URL?

Let's take a look at an example with some code: <form method="post" action="URL"> <input type="text" name="first name" /> <input type="text" name="last name"/> <input type="submit" value="Submit" name="submit"/> < ...

javascripthtmlangulartypescript

Different options for reading large files during an AJAX file upload

It seems that php's file_get_contents is not able to handle large files. What can be done as an alternative if it is causing a "stack overflow" issue? HTML File <form id='test'> <input type='file' name='Receipt&ap ...

javascriptphpajaxfile-get-contents

Issue encountered when using Vue.js with the "calc(...)" attribute binding

Creating a vertical line in an SVG that adjusts its length based on the height of the containing SVG can be challenging, especially when dealing with responsive designs. One approach is to use a rect element with a width of 1px and a height of 100%, but po ...

vue.jssvg

Changing a PHP iteration to Python

I require assistance converting PHP code to Python. The code takes results from a MongoDB cursor and, using a loop, generates a specific array. I now need to achieve the same array using Python code. Here is a visual representation of the MongoDB results: ...

phppythonarraysmongodb

`Dealing with Java Servlet Exception in Kendo UI Environment`

I am facing an issue with displaying date in my Kendo UI grid. The data is coming from a Java servlet, and I have set the status code to 500 whenever an error occurs. Although I can see the error on the console, I am unable to handle it in JavaScript. My g ...

javascriptjavakendo-uitelerikkendo-ui-grid

Trouble with bringing in the solana/web3.js library

After successfully importing the solana/web3.js package and running it within a NodeJS file, everything was working fine. However, things took a turn when attempting to connect this file with basic HTML, resulting in an error being thrown. import { Tra ...

javascripthtmlsolanasolana-web3js

Executing a React asynchronous function within a UseEffect wrapper

I'm having trouble grasping the concept of how an async function operates. It's puzzling to me that the console.log is throwing an error because the data.rates doesn't exist yet. I was under the impression that since the useEffect function ...

javascriptreactjsasync-await

Implementing Winston logging into a React JS project

I am looking to integrate Winston logging into my React application that was created using create-react-app. First, I installed Winston by running the following command: npm install winston Next, I imported Winston into my app.js file like so: import win ...

javascriptreactjsloggingwinston

Sending an array from a view to a controller via AJAX in Codeigniter

As a newcomer to web programming, particularly in the realm of Codeigniter, I am currently seeking guidance on how to successfully pass an array from a view to a controller. Below is a snippet of the HTML script in my view: <tr class="rowdim"> < ...

phparraysajaxcodeignitercontroller

Step-by-step guide for dynamically including dropdown options

Is there a way to dynamically add a dropdown using JavaScript? I currently have a dropdown with numbers that creates another dropdown when selected. However, I want to add the dynamic dropdown through JavaScript. How can I achieve this? Below is the PHP ...

phpjavascripthtml

Encountering issues when trying to access a property after setting an EJS variable in

Whenever this code runs, an interesting type error occurs within the if statement. It says: Cannot read property product.thumbgallery1 of undefined. var urlArray= []; var product = '<%- product %>'; console.dir(product); ...

javascriptjsonexpressejs

Mastering the management of various events within React Material UI components

I am working with a Material UI Switch Component and need to detect click events on it. In certain situations, I want to prevent the change event from triggering. What is the most effective way to achieve this? While I have previously used event.preventD ...

javascriptreactjsmaterial-ui