<input type="text" v-model="object[obj]">
Output:
object:{'obj1':value}
Desired outcome after input is added:
object:{'obj1':{'prop1':value,'prop2':value}}
<input type="text" v-model="obj">
<input type="text" v-model="object[obj]['prop1']">
<input type="text" v-model="object[obj]['prop2']">
{{object}}
export default {
data() {
return {
obj: '',
object: {},
}
}
}
Is it possible to accomplish this using v-model or a custom input handler?
If you want to dynamically create object keys in Vue, you can set up a change-event handler on the input element using vm.$set():
<template>
<div>
<input v-model="obj" @change="onKeyChange">
</div>
</template>
<script>
export default {
methods: {
onKeyChange() {
const key = this.obj && this.obj.trim()
if (key) {
this.$set(this.object, key, { prop1: '', prop2: '' })
}
}
}
}
</script>
To handle rendering of inputs that depend on object[obj], use conditional rendering with v-if to avoid errors when accessing prop1/prop2 on undefined objects:
<template>
<div>
<template v-if="object[obj]">
<input v-model="object[obj]['prop1']">
<input v-model="object[obj]['prop2']">
</template>
</div>
</template>
Check out the working demo for reference.
In a simple scenario, I am experiencing incorrect results. Code snippet from MyFrame.HTML: <!DOCTYPE html> <html> <head> <title>My Frame</title> </head> <body> <a href="https://www.google.com& ...
As a beginner in programming, I am struggling to understand why the code below is not working. The first three lines of the script are necessary for another part of the webpage, but I don't see how that would affect the rest of the code: <!DOCTY ...
I am currently working on improving an asp.net web forms website by incorporating popup modals to display the rental rates for available equipment. The challenge arises when dealing with pages where each piece of equipment has different rates, requiring a ...
I'm currently developing a unique slider that includes a dynamic video element. With each slide transition, a new video is added to the DOM while the previous one is removed. To achieve this effect, I am utilizing CSS transitions along with a specific ...
Currently using Flot to create a graph displaying clicks per minute within the first 60 minutes of short URLs generated at . The graph currently displays data from minute 0 to minute 59. My query is about adjusting the data to start at 1 and end at 59, wh ...
I am currently working on a CSS animation that looks like this: @-webkit-keyframes flip { 0% {opacity:1;} 100% {opacity: 0;} //This could be 90% //And here could be frame for 100% which would scroll it down. } #headercover { -webkit-animation-name ...
This specific function is designed to fetch data under normal circumstances and to return a value of 0 in the event of a 404 error. function retrieveData(url) { if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); ...
I'm facing an issue while trying to retrieve data for my map using an AJAX call. The error message I receive is: SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data. Interestingly, two previous datasets in my applicatio ...
Apologies for the lackluster title, I couldn't come up with anything better. Let's delve into the following code snippet: app.use(function(request, response){ request.addListener('end', function() { parseUrl(request.url, fu ...
I am currently facing an issue while trying to send the results of a nodejs query to an endpoint. Interestingly, I receive a successful response when using Postman with the correct parameters, but encounter errors when attempting to use axios. data: ' ...
As part of my interactive chat simulation project, I have implemented a feature where users can click on a button named obj4 to start their chat session. Initially, everything functions smoothly, displaying messages 1-4 in the correct order. However, when ...
I am attempting to replicate the code below using jQuery: var newElem = document.createElement("div"); newElem.innerHTML = "DynaColumn"; newElem.className = "ui-state-default ui-corner-all"; return newElem; This is the jQ ...
I tried using chatGPT to help me with my HTML code, but every time I opened it I received an error message saying "Failed to get service" Here is the code that I want to make work: <html> <head></head> <body> <script& ...
I have been attempting to transfer values from a table into a modal. Initially, I successfully displayed the <td> values in an alert when a button was clicked on a specific row. Now, I am aiming to take it a step further by having these <td> va ...
Looking for a solution to send XML requests containing values and content from files obtained by filling out an HTML form. With 5 large files, some exceeding 70 MB, I have implemented JavaScript functions to load file contents and assemble the XML request. ...
I'm encountering an issue with using the trace function in my TypeScript code. The function has been declared in a .d.ts file as shown below: declare function trace(arg: string | number | boolean); declare function trace(arg: { id: number; name: strin ...
I am attempting to create a program that allows users to add circles to an image by clicking on it. Essentially, when the user clicks at coordinates (x,y), a circle with a radius of 10 will appear at that location. I am exploring ways to implement meta-pro ...
While there are existing discussions on this topic, I am presenting my query for two specific reasons: It introduces a potential alternative solution The demo code could be helpful to individuals looking to emulate a menu Following a CSS transition, the ...
I am currently working on building an API library using Django. This API will be accessed by javascript, with the Django-API and javascript running on separate servers. The Django API library requires a custom request header from the javascript front end, ...
I am working with an HTML table where the data is retrieved from a database. I need to add new rows to enter additional data, but the numbering does not continue from the last number. My question is how can I increase the numbering in the table. Please ref ...