Задать вопрос
AndrewHaze
@AndrewHaze
Умею гуглить яндексом
vue

Как отследить в watch такую v-model: v-model="props.item.dsec_declarant_kind"?

Шаблон VueTIFY:

<v-data-table
          :headers="dsec_headers"
          :items="dsec"
        >
         <template v-slot:items="props">
            <tr :id="'row'+props.item.dsec_nnn" @click="mainTableRowClick(props.item.dsec_nnn)">
              <td>
                <div>{{ props.item.dsp_inf }}</div>
              </td>
              <td>
                <div>{{ props.item.dsec_nnn }}</div>
              </td>
              <td>
                <v-select
                  v-model="props.item.dsec_declarant_kind"
                  :items="ddk"
                  item-text="ddk_name"
                  item-value="ddk_code"
                  solo
                  flat
                  hide-details
                  single-line
                  menu-props="auto"
                ></v-select>
              </td>
            </tr>
          </template>
</v-data-table>
  • Вопрос задан
  • 347 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Можно сделать computed свойство - объект, где ключами будут dsec_nnn (вы их используете для генерации id строк, так что они, как я понял, уникальны), а значениями dsec_declarant_kind, изменения которых вас интересуют:

computed: {
  declarantKind() {
    return this.dsec.reduce((acc, n) => (
      acc[n.dsec_nnn] = n.dsec_declarant_kind,
      acc
    ), {});
  },
},

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

watch: {
  declarantKind(newVal, oldVal) {
    const [ key ] = Object
      .entries(newVal)
      .find(([ k, v ]) => oldVal.hasOwnProperty(k) && oldVal[k] !== v) || [];

    if (key) {
      const item = this.dsec.find(n => n.dsec_nnn === key);
      console.log('объект:', item);
      console.log(`было: ${oldVal[key]}`);
      console.log(`стало: ${newVal[key]}`);
    }
  },
},
Ответ написан
8 комментариев
8 комментариев
Пригласить эксперта
Ответы на вопрос 1
Paramid
@Paramid 
watch: {
  'props.item.dsec_declarant_kind': function (after, before) {
    // код
  }
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Разработчик Vue.js
Кортекс
от 60 000 до 100 000 ₽
Разработчик (Frontend developer / Vue.js)
МСтрой
от 99 999 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать лендинг, переработать существующий логистический сайт
16 апр. 2024, в 16:34
30000 руб./за проект
Управление процессами и задачами в продукте "Форсайт"
16 апр. 2024, в 16:33
1000 руб./за проект
Написать учебное JS приложение - несколько интеграций с API
16 апр. 2024, в 16:31
5000 руб./за проект
Ещё заказы