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

Question

[Андрей]

Шаблон 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>

Answer 1

[0xD34F]

Можно сделать 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]}`);
    }
  },
},

Comments

[paramid]

так думаешь не прокатит?

watch: {
  'props.item.dsec_declarant_kind': function (after, before) {
    // код
  }
}

[0xD34F]

paramid, я сначала такой ответ и написал - не читая текст вопроса, просто глядя на заголовок. Но нет, это совсем не то.

[paramid]

0xD34F, а что не так? я просто себе что-то похожее набросал и работает.

[Андрей]

Может это и не по феншую, но в результате сделал так:

@change="onChangedDdk(props.item.dsec_declarant_kind)"

[0xD34F]

paramid, а нет никаких props. В смысле - это же параметры слота, а не свойство или параметр компонента.

[0xD34F]

Андрей, да это понятно. Но вы же вроде watch хотели. А change - это другое. Например, он не сработает, если вы программно измените значение свойства.

[Андрей]

0xD34F, ну watch я хотел по дурости :), А change в данном случае как раз и работает так как нужно - программно я выставляю текущее значение, при "пользовательском" изменении происходит update базы

[0xD34F]

Андрей, ну, на будущее - начинайте свои вопросы с рассказа о том, что вы пытаетесь сделать. Не как, а что. А то писать ответы, которые на самом деле не нужны - как-то не очень интересно.

Answer 2

[paramid]

watch: {
  'props.item.dsec_declarant_kind': function (after, before) {
    // код
  }
}