vue点击事件改变行样式默认选中第一行

使用vue.set

需求

 

<template>
  <!-- TODO 2021/12/16 -->
  <div>
    <ul>
      <li
        v-for="(item, index) in items"
        :key="index"
        @click="selectStyle(item, index)"
        :class="{ active: item.active, enactive: !item.active }"
      >
        {{ item.select }}<span class="icon" v-show="item.active">已被选中</span>
      </li>

    </ul>

  </div>
</template>

<script>
import Vue from 'vue'

export default {
  data () {
    return {
      active: false,
      items: [{ select: '第一行' }, { select: '第二行' }, { select: '第三行' }, { select: '第四行' }]
    }
  },
mounted () {
    this.selectStyle(this.items[0])
},
methods: {
    selectStyle (item, index) {
      this.$nextTick(function () {
        this.items.forEach(function (item) {
          Vue.set(item, 'active', false)
        })
        Vue.set(item, 'active', true)
      })
    }
  }
}
</script>

<!-- 样式 -->
<style scoped>
.active{

　　　background: #ECF9FF;

}
/* .unactive{
    color:#000;
} */
.icon{
    float: right;
    font-size:12px;
}
</style>