Vue's recent update to model initialization

Consider this scenario where we have an input that needs to be bound to a model that has not yet been created:

<input type="number" v-model="emptyObject.model"/>

The emptyObject: {} is present in the data before the Vue instance initialization, but it does not contain any properties. The property emptyObject.model is dynamically added to the object based on user actions (such as a click event). However, the issue arises when this property is added late and it doesn't exhibit reactivity. I observed that reactivity is only achieved if the property is included in emptyObject before the Vue instance creation. Is it not possible in Vue to bind values to models that are not part of the initial data object? Angular can handle such scenarios, so I assumed Vue could as well.

Answer №1

It's important to understand Change Detection Caveats in Vue.js.

If you don't want to declare all reactive properties upfront in the data object, you should consider using Vue.set to add them later on.

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

VueJS implementation of the Navbar Toggler Bootstrap that closes on click outside using a directive

Is there a way to close the Bootstrap-VueJS toggle navbar easily when clicking outside? I have attempted various directive codes, experimented with the vue-click-outside plugin, and tried different examples but haven't had any success. It appears tha ...

The absence of React-select in the request payload is noticeable

While using react-select alongside react-bootstrap, I've encountered an issue where only the first two inputs are being sent to the request payload, excluding the selected options in the select. Despite trying various props in the code, the select da ...

Updating HTML dynamically using jQuery

I have a slideshow with 5 slides, each having its own unique ID, as well as previous and next buttons. Upon hovering over the previous or next button, a tooltip is displayed using jQuery to retrieve the ID attribute from the corresponding div. While I hav ...

Save the processed string into a new array

Will my experimental code function and behave in the same way as my working code, given that the HTML, CSS, and previous JS are functioning properly? If not, what is causing the discrepancy? Additionally, how can I go about creating a loop-array style ver ...

Working with Facebook Graph API data using javascript

I am attempting to parse output results from the Facebook Graph API (specifically comments on a website). Below is the script I am using: if (document.getElementById('comments')) { var url = "https://graph.facebook.com/fql?q=select+xid%2C ...

Create a streaming service that allows for multicasting without prematurely ending the main subject

In my implementation of caching, I am utilizing BehaviorSubject and multicast. The cache stream should begin with an HTTP request and I want the ability to manually trigger a cache refresh by calling next on the subject. While the conventional method of us ...

What are the differences between Node's bcrypt and bcryptjs libraries?

When it comes to using bcrypt in Node, the abundance of libraries available can be overwhelming. Among the top packages on npm are bcrypt with 247k downloads per month bcryptjs with 337k downloads per month (any other options worth considering?) What s ...

Transitioning to Firebase Authentication

I made the decision to transition away from firebase authentication. To accomplish this, I exported all firebase users along with their email addresses, hashed passwords, salt keys, and other necessary information. Next, I transferred them to a database a ...

Can Next.js 13 support the usage of axios?

Despite trying to implement the SSG operation with the fetch option {cache: 'force-cache'}, I consistently received the same data even when the mock server's data changed. I found that using the fetch option {cache: 'no-store'} do ...

Disable Vue click event based on a condition

One issue I encountered was that even though I successfully disabled the document body scroll when my mobile nav was open, the overflow hidden feature was not being removed when a user clicked a link to another route or page. To address this, I implement ...

The status code of an XMLHttpRequest is consistently set to 0

When it comes to handling all ajax requests and specifically dealing with 409 errors, I am facing an issue where my status code always shows as 0, despite FireFox's debugger clearly indicating a 409 error. Below is the snippet of JS code I have been u ...

Developing a JSON structure from a series of lists

var data = [ [ "default_PROJECT", "Allow", "Connect", "Allow", "AddComment", "Allow", "Write", "Allow", "ViewComments", "Allow", "ExportData", "Allow", ...

Unresolved peer dependency issue in NPM recursion

I'm attempting to enhance my @ionic-native/core in order to facilitate the installation of an OIDC client. Regardless of the commands I've attempted, I consistently encounter an error: UNMET PEER DEPENDENCY @ionic-native/[email protected] ...

Responsive Fullscreen Bootstrap Panel with Highcharts

One issue I'm facing is with my (bootstrap) panels that contain Highcharts charts and I want them to show fullscreen without losing their aspect ratio. The problem is that the size of the Highcharts does not adjust when going into full-screen mode. Is ...

Are the Div Tags displaying in a vertical alignment instead of a horizontal one?

I have 3 div elements, each with a width of 4. I want to align them all in a row but I am also using a toggle button to show these divs because by default their display is set to none. When the user clicks the toggle button, the divs will be shown to them. ...

removing duplicate items from an array in Vue.js

I created a Pokemon App where users can add Pokemon to their 'pokedex'. The app takes a pokemon object from this.$store.state.pokemon and adds it to this.$store.state.pokedex. However, users can add the same pokemon multiple times to the pokedex, ...

Tips for implementing arraybuffer playback in video tags

I have been exploring ways to convert images from an HTML canvas into a video. After much research, I just want to be able to select a few images and turn them into a video. By passing multiple images to a library engine, I am able to receive an array buff ...

Solving CORS issue when making an Axios POST request in CodeIgniter 4

I am facing an issue with CORS while trying to post data from my Vue app to the backend, which is built using CodeIgniter 4. Below is my vue service code: import axios from "axios"; const apiUrl = "http://localhost:8080/admin/users/"; ...

Troubles with Angular elements not aligning correctly when using the "display: block" property

When using an angular element for a directive with "display: block", it may not automatically take up 100% of the width of the parent container. In order to ensure that it does, the width must be explicitly set to "100%" in the CSS. Despite setting "width: ...

"Sending an array in a POST request using Javascript and processing it on the server

I am trying to use ajax to send an array. Let's say the array looks like this: var anotherOne = 'anotherOneData'; var documents = ['banana', 'apple', 'monkey']; I successfully sent both a normal value and an a ...