Как изменить вложенное свойство через сцепление во vue?

Question

[WAYNEDEV]

Всем привет!

Есть объект:

const obj = {
  a: '',
  b: {
    value: ''
  }
}

const obj2 = [
  { model: 'a' } 
  { model: 'b.value' }
]

Мне нужно, чтобы можно было менять в подобном типе:

<p v-for="item in obj 2" v-model="obj[model]">

Структуру объектов, к сожалению, нельзя поменять, оттуда вопрос - как мне добраться до вложенных свойств в подобном типе?

Буду очень благодарен за помощь!

Answer 1

[0xD34F]

computed: {
  model() {
    return new Proxy(Object.fromEntries(this.obj2.map(n => [ n.model, null ])), {
      get: (target, prop) => typeof prop === 'string'
        ? prop.split('.').reduce((p, c) => p?.[c], this.obj)
        : target[prop],
      set: (target, prop, value) => {
        const keys = prop.split('.');
        const key = keys.pop();
        const obj = keys.reduce((p, c) => (!p.hasOwnProperty(c) && this.$set(p, c, {}), p[c]), this.obj);
        this.$set(obj, key, value);
        return true;
      },
    });
  },
},

<div v-for="(v, k) in model">
  <input v-model="model[k]">
</div>

https://jsfiddle.net/34brtvok/

Или, если несуществующие пути не должны обрабатываться, можно сделать попроще:

computed: {
  model() {
    return this.obj2.map(n => {
      const keys = n.model.split('.');
      const key = keys.pop();
      const obj = keys.reduce((p, c) => p?.[c], this.obj);

      return obj && { obj, key };
    }).filter(Boolean);
  },
},

<div v-for="n in model">
  <input v-model="n.obj[n.key]">
</div>

https://jsfiddle.net/34brtvok/1/