监视v-for循环中改变的项并表示出来

Question

如图一数据表格，用v-for循环出来，大概每1秒钟请求一次数据
想让每次请求数据时，有改变的行突出显示，不知vue2中可有办法实现这个需求 ？

Answer 1

我觉得最好的办法是在你赋值之前对加载到的数据进行处理。

<table>  
  <tr v-for="item in items" :class="item.isChanged ? 'changed' : ''">....</tr>
</table>

export default {
  data() {
    return {
      items: [],
    }
  }
  methods: {
    fetch() {
      fetch(API)
        .then(response => {
          const items = keyBy(this.items, 'id');
          this.items = response.map(item => {
            item.isChanged = item.value !== items[item.id].value;
          });
        });
    }
  },
  mounted() {
    setInterval(this.fetch.bind(this), 60000);
  },
}

Answer 2

写一个 oldlist, 一个 list , 用 watch 监控 list, 把老值赋值给 oldlist , 然后两个 list 做判断, class="{new: oldlist[i] != list[i]}" <- 这里瞎写的不要介意.