VUE for循环 默认选中第一条数据

for循环渲染列表默认选中第一条数据 点击其他选项切换数据

       
项目清单
       

           

            {{ index + 1 }} {{ item.name }}
             
       

主要代码: :class="{ active: index === selectedProjectIndex }"         以及  @click="projectFn(item.id)"                

active是样式名称  index是前面循环的index    selectedProjectIndex是接下来要定义的变量

点击方法传递的就是该条数据的id

const project = ref([
    { id: '1', name: '湖北省公租房管理第三方评价项目', sonTask: "8", problem: '2' },
    { id: '2', name: '河北省公租房管理第三方评价项目', sonTask: "7", problem: '1' },
    { id: '3', name: '河南省省公租房管理第三方评价项目', sonTask: "6", problem: '3' },
])


//默认为0 就会默认选中
const selectedProjectIndex = ref(0)

function projectFn(id) {
       //根据传递回来的id判断是哪一条数据被选中
    selectedProjectIndex.value = project.value.findIndex(item => item.id === id);
    }

最后样式 (自己定义)

 .active {
                     background: url(../../assets/visualization/background/activeBgc.png) no-repeat;
                    background-size: 100% 100%;
                    }