Spontaneously generating models

Question

Spontaneously generating models

Explaining this concept can be a bit complex. I am tasked with creating an object that contains properties from dynamic HTML code. To illustrate, let's use an example:

Firstly, here is my data object:

var myObject = {Field1: 'Value1', Field2: 'Value2'};

Next, I have an array listing the properties of my object like so:

var myArray = ['Field1', 'Field2'];

I then utilize this array to generate <input> elements in a for loop:

<div v-for="property in myArray">
    <input type="text" :value="myObject[property]" />
</div>

The challenge at hand is retrieving the values from these dynamically generated inputs, either as an object or an array.

While it may seem straightforward to just grab myObject, the issue arises when the input values change (since they are user-modifiable). We also want to avoid directly binding the inputs to myObject, as we need myObject to stay in its original state even if the input values are altered.

My question is, how can I create a new object and bind my inputs to that newly created object?

javascript vue.js

Answer 1

Answer №1

Here are some possible solutions:

Utilize v-model for one computed value, but note that Vue may not detect modifications for re-rendering.
Create a clone of myObject and watch it for changes, triggering actions as needed.
A variation of solution 2 involves using v-bind to assign values from input events to another object or target. Note that v-model performs a similar function.

const app = new Vue({ //Remember, it's Vue, not vue
el: "#app",
  data() {
    return {
      myObject: {Field1: 'Value1', Field2: 'Value2'},
      myArray: ['Field1', 'Field2'],
      copyMyObject: {}, //solution 2
      copyMyObject1: {} //solution 3
    }
  },
  computed: {//solution 1
    computedObject: function(){
      return Object.assign({}, this.myObject)
    }
  },
  mounted: function(){ //solution 2
    this.copyMyObject= Object.assign({}, this.myObject)
    this.copyMyObject1= Object.assign({}, this.myObject)
  },
  watch: {//solution 2
    copyMyObject: function (newValue, oldValue){
      console.log('copyMyObject', newValue)
      //Custom actions can be performed here
    }
  },
  methods: {
    getObject: function () {//solution 1
      console.log('computedObject', this.computedObject)
      console.log('myObject', this.myObject)
    }
  }
})

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4acaeadb9958aa0939eac3">[email protected]</a>/dist/vue.js"></script>
<div id="app">
  <button @click="getObject()">Click me!</button>
  <p>The downside: {{computedObject}}</p>
  <div v-for="property in myArray">
      <input type="text" v-model="computedObject[property]" />
  </div>
  <p>Original: {{myObject}}</p>
  <p>Clone: {{copyMyObject}}</p>
  <div v-for="property in myArray">
      <input type="text" v-model="copyMyObject[property]" />
  </div>
  <p>Clone: {{copyMyObject1}}</p>
  <div v-for="property in myArray">
      <input type="text" v-bind:value="copyMyObject1[property]" @input="copyMyObject1[property] = $event.target.value" />
  </div>
</div>

Answer 2

Here are some possible solutions:

Utilize v-model for one computed value, but note that Vue may not detect modifications for re-rendering.
Create a clone of myObject and watch it for changes, triggering actions as needed.
A variation of solution 2 involves using v-bind to assign values from input events to another object or target. Note that v-model performs a similar function.

const app = new Vue({ //Remember, it's Vue, not vue
el: "#app",
  data() {
    return {
      myObject: {Field1: 'Value1', Field2: 'Value2'},
      myArray: ['Field1', 'Field2'],
      copyMyObject: {}, //solution 2
      copyMyObject1: {} //solution 3
    }
  },
  computed: {//solution 1
    computedObject: function(){
      return Object.assign({}, this.myObject)
    }
  },
  mounted: function(){ //solution 2
    this.copyMyObject= Object.assign({}, this.myObject)
    this.copyMyObject1= Object.assign({}, this.myObject)
  },
  watch: {//solution 2
    copyMyObject: function (newValue, oldValue){
      console.log('copyMyObject', newValue)
      //Custom actions can be performed here
    }
  },
  methods: {
    getObject: function () {//solution 1
      console.log('computedObject', this.computedObject)
      console.log('myObject', this.myObject)
    }
  }
})

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4acaeadb9958aa0939eac3">[email protected]</a>/dist/vue.js"></script>
<div id="app">
  <button @click="getObject()">Click me!</button>
  <p>The downside: {{computedObject}}</p>
  <div v-for="property in myArray">
      <input type="text" v-model="computedObject[property]" />
  </div>
  <p>Original: {{myObject}}</p>
  <p>Clone: {{copyMyObject}}</p>
  <div v-for="property in myArray">
      <input type="text" v-model="copyMyObject[property]" />
  </div>
  <p>Clone: {{copyMyObject1}}</p>
  <div v-for="property in myArray">
      <input type="text" v-bind:value="copyMyObject1[property]" @input="copyMyObject1[property] = $event.target.value" />
  </div>
</div>

Answer 3

Answer №2

To create a new object based on the original one, you can do the following:

data: {
  updatedObject = Object.assign({}, myObject)
}

After creating the new object, you can incorporate it into your template like this:

<div v-for="property in myArray">
    <input type="text" v-model="updatedObject[property]" />
</div>

Answer 4

To create a new object based on the original one, you can do the following:

data: {
  updatedObject = Object.assign({}, myObject)
}

After creating the new object, you can incorporate it into your template like this:

<div v-for="property in myArray">
    <input type="text" v-model="updatedObject[property]" />
</div>

Spontaneously generating models

Answer №1

Answer №2

Similar questions

What is the method for stopping a slide in this script?

Ways to remove the address bar from a mobile browser like Chrome or an Android browser

Tips for extracting key values from an array of objects in Typescript

Creating interactive popups using Web Map Service (WMS) with the

Selecting middleware to be executed based on Express JS request parameters

Are tabs best displayed as an overlay?

Issue encountered while utilizing JQueryUI alongside TypeScript and the definition file from DefinitelyTyped

Standardize date formatting in AngularJS

Tips for checking form input validity prior to opening a modelDialog

An object will not be returned unless the opening curly bracket is positioned directly next to the return statement

expanding the expressjs res feature

When attempting to send data to the ServiceStack RESTful service, an error message of 'Access is denied' was received

"Error: Unable to locate module" encountered during the transition to Webpack 5

Using jQuery, you can utilize the $.when() function with both a single deferred object and an

Retrieve the overall number of job openings from the Github Job API

Encountering difficulties with integrating map controls into the Nuxt3/Vue3 mapbox feature for zooming

The 'Image' component does not have a propType defined for the native prop 'RCTImageView.overlayColor' with a native type of 'number'

Guide on automatically attaching a file to an input file type field from a database

Determining the quantity of displays

Having trouble with Angular 2's Output/emit() function not functioning properly