Добавление свойства вложенного объекта через v-модель

Question

Данные, с которыми я работаю, являются динамическими c. Не всегда возможно заранее узнать, какими будут свойства объекта для моих данных. Я хотел знать, возможно ли добавить свойства вложенного объекта через v-модель? Вот пример

<template>
  <div v-for="field in fieldArray">
    <v-if="field.type === 'html'">
      <v-text-field v-model="field['html'][language]" /> //field['html'] is not a current key on the field object
    </v-if>
  </div>
</template>

<script>
data() {
  return {
      language: 'en'
  }
}
</script>
//field array example
fieldArray: [
  {
    type: 'html',
    label: 'HTML Label'
  },
  {
    type: 'radio',
    label: 'Radio button Label'
  }
]

Answer 1

Для начала это не так, как v-if работает, вы должны использовать его как атрибут в узле.

Теперь, отвечая на вопрос, это невозможно только с v-model, но с v-model это всего лишь короткая комбинация :value и @input, вы можете заставить ее работать следующим образом:

<template>
  <div v-for="(field, index) in fieldArray">
    <template v-if="field.type === 'html'">
      <v-text-field 
         :value="field.html ? field.html[language] : ''" 
         @input="e => updateFieldValue(index, 'html', e.target.value)" />
    </template>
  </div>
</template>
<script>
methods: {
  updateFieldValue(index, prop, value) {
      let field = this.fieldArray[index]
      if(!field[prop]){
        // set empty object if not defined
        field[prop] = {}
      }
      field[prop][this.language] = value

      // make a clone of fieldArray
      let newFieldArray = [...this.fieldArray]
      // replace with the new field
      newFieldArray[index] = field
      // Trigger reactivity
      this.fieldArray = newFieldArray
  }
}
</script>

Пример Codepen

Кстати, имея v-if внутри v-for - это Vue кодовый запах. Скорее всего, вы сможете достичь того же с помощью вычисляемого свойства, которое отображает тип каждого fieldArray на соответствующий компонент для визуализации.