Vue - установить v-модель динамически (с переменной, содержащей строку)

Question

Мне не удалось установить v-модель динамически.

Это работает, если я набираю явно:

 <div class="form-group mr-3 mb-2">
     <input type="text"  
       v-model="form[filters][firstlastname]" 
     > 
</div>

Но я хочу l oop через объект, в котором есть строка, например: 'form [filters] [firstlastname]'

Родитель имеет форму со свойствами:

data() {
   return {
     form: new Form({
        filters: {
        gender: [],
        firstlastname: 'My firstlastname'

Итак, от родителя я передаю форму вниз и фильтрую в дочерний компонент, вот фильтры:

  let formFilters = { filters: [
      {
         type: 'text',
         property: 'form[filters][firstlastname]',        // <-- string 
        placeholder: 'Name',
     },
     {
        type: 'number',
        property: 'paginate', 
        placeholder: 'Max rows'
     },
   ]
}

Дочерний компонент: (здесь я oop через объект и генерирую поля ввода)

<div v-for="(filter,index) in formFilters.filters" 
       :key="`${index}_${filter.property}`"
   >
      <input 
         v-if="filter.type === 'text' || filter.type === 'number'"
         :placeholder="filter.placeholder" 
         :type="filter.type"                
          v-model="filter.property"               //<--- set the property
     >

Это не работает. V-модель просто интерпретирует ее как строку, а не как ссылку на свойство формы. Я тестировал другие способы, такие как: v-model="``${[filter.property]}``" (одинарный, а не двойной `` ``, но он не будет отображаться в stackoverflow в противном случае) и другие сумасшедшие вещи, но это недопустимо.

Итак, как мне установить v -модель с переменной, содержащей строку (чтобы ее можно было установить динамически)?

Answer 1

Это очень сложная проблема ....

Вы можете получить доступ к любому свойству, присутствующему в шаблоне data внутри html, используя 2 способа:

1. Ссылка на свойство напрямую
2. Использование $data

data(){ return{ firstlastname: 'Mr First last name' } }

, поэтому в шаблоне html можно использовать
<p>{{firstlastname}}</p>
или
<p>{{$data.firstlastname}}</p>

Для вашего сценария $data может использоваться для примитивных типов данных, таких как строка или число,

<input v-if="filter.type === 'text' || filter.type === 'number'" :placeholder="filter.placeholder" :type="filter.type" v-model="$data[filter.property]">

Но это не будет работать для вашего второго сценария, когда вы пытаетесь получить доступ к вложенному свойству объекта form.filters.firstlastname
Вы можете получить доступ к этому свойству, используя следующую запись $data[form][filters][firstlastname]

В вашем случае , для l oop будет выглядеть как $data[form.filters.firstlastname] или $data[[form][filters][firstlastname]], что вызовет исключение

. Как предлагается в комментариях, попробуйте другой подход или сгладьте объект. Вы можете обратиться к этой ссылке, чтобы увидеть, как выровнять объект { ссылка }