Vue - Как повторно отображать изменение определенного объекта массива без повторного рендеринга всего массива

Я долго искал этот ответ. Наконец-то публикую его, так как у меня есть проблема, связанная с этим.

Пожалуйста, проверьте этот фрагмент кода ниже

<div>
    <template v-for="(row, index) in rows">
         <tr v-if="hasChildData(row, index)" :key="`row-${tabId}-${index}`">
              <!-- Rest of the logic -->
         </tr>
    </template>
</div>

Метод

hasChildData(row, index) {
  console.log("Looping index: "+ index);
  return row.childData;
}

Допустим, строки представляют собой массив и имеют 5 элементов.

data() {
    return {
      rows: [
        { test: 123 },
        { test: 345 },
        { test: 567 },
        { test: 789 },
        { test: 904 },
      ]
   };
}

Где-то я пытаюсь обновить определенную строку в массиве строк. В этом случае индекс 3

setChildData() {
    Vue.set(this.rows[3], "childData", true);
}

Почему Vue повторно отображает весь цикл. Есть ли способ повторно отображать только определенный индекс только 3 ? Это связано с Изменить конкретный индекс без повторного рендеринга всего массив в Vuejs, но не нашел ответа, который искал.

Вывод После вызова setChildData():

Циклический индекс: 0

Циклический индекс: 1

Циклический индекс: 2

Циклический индекс: 3

Циклический индекс: 4

Пока я ожидаю

Циклический индекс: 3


vue.js vuejs2 vue-reactivity v-for
person Sathya    schedule 23.07.2021    source источник
comment
stackoverflow.com/a/67603075/381282   -  person Michal Levý    schedule 23.07.2021
comment
Переместите все, что вы не хотите перерисовывать, во вложенные компоненты. Он перерисовывает текущий компонент, а не цикл.   -  person Estus Flask    schedule 23.07.2021

Ответы (1)


arrow_upward
-1
arrow_downward

Есть два способа перерендерить блоки: переключение v-if и изменение ключа (их можно использовать не только в циклах, а где угодно). На мой взгляд, лучший способ - сменить ключ. Установите дополнительный параметр в объектах вашего массива.

data() {
return {
  rows: [
    { test: 123, updates: 0},
    { test: 345, updates: 0},
    { test: 567, updates: 0},
    { test: 789, updates: 0},
    { test: 904, updates: 0},
  ]

}; }

Теперь добавьте этот параметр в свой ключ

<div>
<template v-for="(row, index) in rows">
     <tr v-if="hasChildData(row, index)" :key="`row-${tabId}-${index}-${row.updates}`">
          <!-- Rest of the logic -->
     </tr>
</template>

Теперь вы можете изменить параметр обновления любого объекта в массиве, и он будет перерисован

person ZloiGoroh    schedule 23.07.2021