mehanik-pyx
@mehanik-pyx
Junior Vue.js developer

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

Мне нужно на странице профиля человека распарсить приходящий с бэка 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': 'miks30@gmail.com',
            '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'
              }
            ]
          }
        ]
      }


  • Вопрос задан
  • 98 просмотров
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега Vue.js
computed: {
  values() {
    return Object.fromEntries(this.errorMessages.map(n => {
      const [ , path, key ] = n.path.match(/(.*)(?:^|\.)([^.]+)$/);
      return [
        n.path,
        {
          key,
          obj: (path ? path.split('.') : []).reduce((p, c) => {
            return Array.isArray(p) ? p.find(n => n.guid === c) : p[c];
          }, this.userData),
        },
      ];
    }));
  },
  ...

v-model="values[msg.path].obj[values[msg.path].key]"
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы