当对象尚未在vue中声明时，如何处理对象的输入？

Question

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

输出：

object:{'obj1':value}

输入时期望的结果：

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

这可以通过v-model或一些自定义输入处理程序来实现吗？

Answer 1

您可以在<input>上添加一个使用vm.$set()创建新对象键的change-event处理程序：

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

其他依赖于object[obj]的<input>应该是conditionally rendered with v-if，以避免在未定义的对象上使用prop1/prop2：

<template>
  <div>
    <template v-if="object[obj]">
      <input v-model="object[obj]['prop1']">
      <input v-model="object[obj]['prop2']">
    </template>
  </div>
</template>

demo