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

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

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

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

Но я хочу перебрать объект, в котором у меня есть строка, например: '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'
     },
   ]
}

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

<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-модель с переменной, содержащей строку (чтобы ее можно было установить динамически)?


vue.js v-model
person Galivan    schedule 29.01.2020    source источник
comment
Я даже не понимаю, как это будет работать: v-model="form[filters][firstlastname]" , не так ли: v-model="form['filters']['firstlastname']"   -  person AJT82    schedule 29.01.2020
comment
Я полагаю, вы правы. Но даже если я изменю его на: property: 'form[\'filters\'][\'firstlastname\']', он интерпретируется как строка. Я также пробовал form.filters.firstlastname, и это то же самое.   -  person Galivan    schedule 29.01.2020
comment
Да, я знаю, что это не сработает. Но если это не из api, я бы порекомендовал вам использовать другой подход для решения этой проблемы. Я не думаю, что это вообще хорошая идея?   -  person AJT82    schedule 29.01.2020
comment
Фильтры определены в родительском элементе (а не в api). Что ж, я могу решить эту проблему, добавив только одно имя свойства для каждого поля в моем объекте фильтров. Тогда я могу сказать: v-model = form.filters [filter.property]. Тогда все свойства должны быть в form.filters ... Я подумал, что было бы неплохо сделать его полностью динамическим, но это кажется невозможным ..   -  person Galivan    schedule 30.01.2020

Ответы (1)


arrow_upward
2
arrow_downward

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

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

  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]

В вашем случае , цикл for приведет к $data[form.filters.firstlastname] или $data[[form][filters][firstlastname]], что вызовет исключение

Как предлагается в комментариях, попробуйте другой подход или сгладьте объект. Вы можете обратиться к этой ссылке, чтобы узнать, как сгладить объект https://stackoverflow.com/a/25370536/2079271

person Gowthaman    schedule 29.01.2020
comment
Это было очень мило. Спасибо - person Ali Sharifineyestani; 20.01.2021