vue2响应式样式失效

在做一个菜单列表的时候，点击那个节点那个进行高亮显示，会对其进行增删改查，样式如下

 一开始我用的下标来进行判断高亮显示，但是进行增删查操作，再进行点击样式就乱套了。总的来说是因为只要值的地址没有改变，vue是检测不到数据变化的

解决方法1

最开始的解决办法是用的是$event事件来进行处理,但是会造成资源消耗，重排重绘

body代码，给每个for循环渲染的节点绑定一个点击事件。给第一个元素默认给个高亮样式active

 <div
            v-for="(o, index) in fieldList"
            :key="o.id"
            :class="index == 0 ? `active ${o.id}` : `${o.id}`"
            class="text item"
            ref="doms"
            @click="zhanshi(o.id, $event)"
          >
            <div>{{ o?.field }}</div>
            <!-- 鼠标滑过出现删除修改按钮 -->
            <div class="button_group">
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="Import_accounts(5, o.id, o.field)"
                circle
                size="mini"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteField(1, o.id)"
                circle
                size="mini"
              ></el-button>
            </div>

js代码，判单点击的事件是存在的，判单不能点击别的样式类名。

 async zhanshi(e) {
      if (e) {
        if (
          e.target.className != "box-card" &&
          e.target.className != "el-card__body" &&
          e.target.className != "el-icon-edit" &&
          e.target.className !=
            "el-button el-button--primary el-button--mini is-circle" &&
          e.target.className != "button_group" &&
          e.target.className != "el-icon-delete"
        ) {
// 判断点击的文字马，它的类型是为空的
          if (e.target.className != "") {
// 找到他的父节点下所有孩子，清除样式，排他算法
            for (let i = 0; i < e.target.parentNode.children.length; i++) {
              e.target.parentNode.children[i].className = "text item";
            }
            e.target.className = "active text item";
          } else { // 点击的是文字节点，类型为空，要找到父节点的父节点
            for (
              let i = 0;
              i < e.target.parentNode.parentNode.children.length;
              i++
            ) {
              e.target.parentNode.parentNode.children[i].className =
                "text item";
            }
            e.target.parentNode.className = "active text item";
          }
        }}

解决方法2，利用$set方法：向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。

简单小demo

<template>
 <div class="home">
  <div v-for="(item,index) in items" :key="index">{{item}}</div>
  <button @click="btn()">修改</button>
 </div>
</template>
 
<script>
import Vue from 'vue' // 别忘了引入
export default {
 name: 'Home',
 data(){
  return{
  items:[1, 2, 3]
  }
 },
 methods:{
 btn(){
      Vue.set(this.items, 1, 'two')
  console.log(this.items);
 }
 }
}
</script>