VueJS added a new object to the array, but the data did not update reactively

Here is my current data layout


days: [
  {
    id: 0
    name: 'Monday',
    times: []
  },
  {
    id: 1
    name: 'Tuesday',
    times: []
  }
}

I have implemented the following function to append an object to the times array.

onTimeAdded (dayId) {
  const dayIndex = this.days.findIndex(day => day.id === dayId)
  this.days[dayIndex].times.push({ from: '09:00', to: '18:00' })
}

Although this successfully adds the object to the array, changing the value of one of the properties of the object does not trigger reactivity. The from and to properties are defined as follows:

<input
    type="time"
    name="to"
    :placeholder="To"
    :value="time.to"
>

If I add an object to a reactive array, will the properties of that object be reactive?

Answer №1

Consider updating the input element by replacing the value property with v-model, and removing the unnecessary colon before the placeholder.

<input type="time" name="departure" placeholder="Departure Time" v-model="time.departure">

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 situations call for the use of 'import * as' in TypeScript?

Attempting to construct a cognitive framework for understanding the functionality of import * as Blah. Take, for instance: import * as StackTrace from 'stacktrace-js'; How does this operation function and in what scenarios should we utilize imp ...

Are there specific mathematical algorithms that lend themselves well to creating responsive HTML designs?

Tired of constantly guessing the percentage values to use with a specific number of divs and other elements in my design. I am looking to understand the mathematical calculations that determine the scaling required for different elements in order to main ...

NodeJS Express throwing error as HTML on Angular frontend

I am currently facing an issue with my nodejs server that uses the next() function to catch errors. The problem is that the thrown error is being returned to the frontend in HTML format instead of JSON. I need help in changing it to JSON. Here is a snippe ...

ReactJS: Difficulty with SVG foreignObject not capturing onClick event

Utilizing React Digraph for developing an interface where users can construct and modify state machines. The current functionality is decent, especially in terms of node manipulation via keyboard shortcuts. However, I aim to enhance the user experience by ...

Tips for adding JSON values to an object

There is a specific object called SampleObject which has the following structure: { ID: "", Name: "", URL: "", prevName: "", Code: "", } I am looking to insert the values from the JSON object below (values only): var object = { "Sample ...

Creating interactive dropboxes in PHP and JavaScript to dynamically change options and display the selected value

Currently, I am in the process of working on a dynamic dropdown menu that involves select boxes. These values are being pulled directly from a MySQL database (if you're interested, here is how I set up the database). I have successfully retrieved and ...

Hover and hover-off functions in navigation menu

html <div class="hidden-nav"> <h4>lorem</h4> <ul class="decor-menu-list"> <li><a href="#">123</a></li> <li><a href="#">123</a></li> <li><a hre ...

The $watch() function seems to be failing to properly refresh the $scope

Within my controller, I have a function $scope.remove() that triggers a request to the usercart, which then calls an API. The JSON response from the API includes an object with an array of cart items. Despite using an ng-repeat in the HTML to iterate thro ...

Having difficulty incorporating external SASS styles into my React.js project

In most of my projects, I follow a similar process for importing SASS styles. First, I create my react app and then install SASS using the command npm install node-sass. Next, I import my SASS file into my app components as shown below: import React from & ...

Using ngFor in Angular 2-5 without the need for a div container wrapping

Using ngFor in a div to display an object containing HTML from an array collection. However, I want the object with the HTML node (HTMLElement) to be displayed without being wrapped in a div as specified by the ngFor Directive. Below is my HTML code snipp ...

Engage with an Express server using a net server in Node.js

I had this unique idea where running a nodejs script would initiate an http (express) server on port 8080 and a regular TCP (net) server on port 1337. When you connect to the TCP server using netcat and send "alert," it triggers the alert() command on a ...

Can jQuery.jScrollPane be set to consistently display a vertical scroll bar?

Can jQuery.jScrollPane be configured to consistently display a vertical scroll bar? Is there a hidden setting or API function that can achieve this? Ideally, without needing to adjust the content pane's height or other properties. ...

Dealing with submit errors in React Redux forms

I am facing a challenge with handling exceptions properly when submitting in redux forms. I want to display a toast message when an error occurs. LogIn.js: class LogIn extends PureComponent { onSubmit = (values) => { const { login } = this.props; ...

The array used within the useEffect hook and the getCoordinates function appears to be distinct when printed with console

Utilizing GoogleMap API for Custom Location Display I have an imported array of JSON objects named data which includes an address property. The Google Maps API is used to retrieve coordinates from the addresses in order to generate custom markers displaye ...

How can I interpret a string with a specific format using JavaScript?

Input String: var json_data = "{0:'apple', 1:'bannana', 2:'guava'}"; Desired Output after parsing with JavaScript: var json_data = { columns: [{0:'apple'}, {1:'bannana'} ,{2:'guava'}] ...

Tips for preloading a small placeholder image before the main content is loaded

After browsing , I noticed an interesting image loading style. The website initially shows a patterned image before revealing the actual content. This method creates visually appealing content while waiting for the entire webpage to load. Upon inspecting ...

Experimenting with animating an element through onClick event using JavaScript

I would like to create an animated div using JavaScript that activates on click. <div class="Designs"> <p>Designs</p> <div class="Thumbnails" data-animation="animated pulse"> <a href=" ...

Resolving conflicts between Bootstrap and custom CSS transitions: A guide to identifying and fixing conflicting styles

I am currently working on implementing a custom CSS transition in my project that is based on Bootstrap 3. The setup consists of a simple flex container containing an input field and a select field. The functionality involves using jQuery to apply a .hidde ...

What is the process for implementing optional chaining on a JSON object?

I'm currently facing an issue where I need to compare a value within a JSON object with a variable. if (resp.userdetails.name == username) { // do something } The challenge arises when not all resp objects contain the userdetails property, resulting ...

Prevent the href from navigating to the next page when a doubleclick event listener is triggered

In my project, I am using an anchor tag that redirects to another page. However, if the user double clicks on it, I want to prevent the default behavior and stop the redirection. <a href="{location}">My Link</a> element.addEventListen ...