javascript - how to handle input for objects when the object has not yet been declared in vue?

Question

<input type="text" v-model="object[obj]">

Output:

object:{'obj1':value}

Desired result when input is entered:

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: {},
    }
  }
}

Can this be achieved with v-model or some custom input handler?

question from:https://stackoverflow.com/questions/65845688/how-to-handle-input-for-objects-when-the-object-has-not-yet-been-declared-in-vue

Answer 1

You could add a change-event handler on the <input> that uses vm.$set() to create the new object key:

<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>

The other <input>s that depends on object[obj] should be conditionally rendered with v-if to avoid using 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>

demo