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

Question

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

Output：

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>上添加一个change事件处理程序，该处理程序使用vm.$set()创建新的 object 密钥：

<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>应该用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>

演示