Как правильно сделать динамический v-model во Vue?

Question

[Александр Попов]

Мне нужно на странице профиля человека распарсить приходящий с бэка JSON на его карточку с данными(+подсветить данные по которым пришли messages) и отдельно отобразить динамическое количество инпутов для тех полей где 'type': 'ERROR': 1)с v-model изначально равным соответствующему значению из объекта data, 2)показать рядом человеческое название поля и 3)value сообщения.

С отображением данных я справился, но когда начал писать инпуты: 1)получается костыль на костыле, 2)дошел до "v-model изначально равным соответствующему значению из объекта data" и не понимаю как это сделать, 3)помогите :о

Также используется библиотека Element-UI, но если с ней не знакомы тут вроде всё интуитивно понятно

Пример JSON

{
        'status': 'OK',
        'messages': [
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'tin_number',
            'value': 'Number incorrect'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'documents.guid12345.number',
            'value': 'Selfie is incorrect'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'date_of_birth',
            'code': 'sfddsf',
            'value': 'Selfie is incorrect'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'last_name',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'place_of_birth',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'source_of_funds',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'nationality',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-g-Kz3XoAAj-3.address_type',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-g-Kz3XoAAj-3.street',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-g-Kz3XoAAj-3.house',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-g-Kz3XoAAj-3.barangay',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-g-Kz3XoAAj-3.zip_code',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-h-vjgjaQx7-3.address_type',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-h-vjgjaQx7-3.country',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-h-vjgjaQx7-3.province',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-h-vjgjaQx7-3.municipality',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-h-vjgjaQx7-3.street',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-h-vjgjaQx7-3.house',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-h-vjgjaQx7-3.barangay',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-h-vjgjaQx7-3.zip_code',
            'value': 'PROCESS'
          }
        ],
        'data': [
          {
            'verification_status': 'NEED_ADDITIONAL_INFO',
            'first_name': 'MikS',
            'middle_name': 'Val',
            'last_name': 'Nokia',
            'phone': '639305236773',
            'email': '[e-mail]',
            'date_of_birth': '1988-05-30',
            'place_of_birth': 'Ekb',
            'gender': 'MALE',
            'source_of_funds_id': 10,
            'source_of_funds': 'Others',
            'nationality_id': 171,
            'nationality': 'Philippines',
            'addresses': [
              {
                'guid': 'guid3',
                'country_id': 170,
                'country': 'Peru',
                'province_id': 15,
                'province': 'CORDILLERA ADMINISTRATIVE REGION (CAR)',
                'municipality_id': 119,
                'municipality': 'PAGUDPUD',
                'barangay_id': 2100,
                'barangay': 'Laoa',
                'street': 'fdgashgf',
                'house': 'House22',
                'zip_code': '2902',
                'address_type': 'PRESENT'
              },
              {
                'guid': 'ohUhNk-g-Kz3XoAAj-3',
                'country_id': 171,
                'country': 'Philippines',
                'province_id': 13,
                'province': 'REGION XII (SOCCSKSARGEN)',
                'municipality_id': 118,
                'municipality': 'NUEVA ERA',
                'barangay_id': 2201,
                'barangay': 'Santo Tomas',
                'street': 'SomeStreet',
                'house': 'House100',
                'zip_code': '2905',
                'address_type': 'PRESENT'
              },
              {
                'guid': 'ohUhNk-h-vjgjaQx7-3',
                'country_id': 178,
                'country': 'Reunion (French)',
                'province_id': 13,
                'province': 'REGION XII (SOCCSKSARGEN)',
                'municipality_id': 118,
                'municipality': 'NUEVA ERA',
                'barangay_id': 2200,
                'barangay': 'Salanap',
                'street': 'SomeStreet',
                'house': 'House100',
                'zip_code': '2905',
                'address_type': 'PRESENT'
              }
            ],
            'tin_number': '12324-352523',
            'documents': [
              {
                'guid': 'guid12345',
                'type_id': 1,
                'number': '1234-5466',
                'expired_at': '2020-10-23'
              },
              {
                'guid': 'guid1234567',
                'type_id': 2,
                'number': '1257-6424',
                'expired_at': '2019-08-23'
              }
            ],
            'photos': [
              {
                'guid': 'guid123',
                'type': 'SIGNATURE'
              }
            ]
          }
        ]
      }

Comments

[Alex]

Честно говоря, не очень понятно суть проблемы.

[Александр Попов]

Alex, мне надо в v-model вывести значение соответствующего поля из объекта data.
Чтобы в первом инпуте изначальное value было не "tin_number" а "12324-352523"
Во втором не "documents.guid12345.number" а "1234-5466"
В третьем не "documents.guid1234567.expired_at" а "2019-08-23"
И т.д.

Answer 1

[0xD34F]

дошел до "v-model изначально равным соответствующему значению из объекта data" и не понимаю как это сделать

При создании массива, описывающего элементы формы, строки с путями к значениям режете на куски (разделитель - точка). Используя полученные массивы, достаёте из data значения, помещаете их в объекты, описывающие элементы формы. Всё, можно использовать v-model:

<el-form-item v-for="n in formItems">
  <el-input v-model="n.value" />

https://jsfiddle.net/3q706bp9/

Если же хотите, чтобы при использовании v-model изменялись значения в data, то после разрезания строки с путём выдёргиваете из полученного массива последнее значение - это ключ, имя свойства. Объект, в котором это свойство находится, достаёте из data, основываясь на том, что в массиве осталось. Кладёте ключ и полученный объект в объект, описывающий элемент формы. А в шаблоне делаете так:

<el-form-item v-for="n in formItems">
  <el-input v-model="n.obj[n.key]" />

Поскольку объект в data и объект в объекте, описывающем элемент формы - один и тот же, то при изменении второго, будет меняться и первый.

https://jsfiddle.net/x6ncpo90/