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

 

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

<div>
       <div class="Subtitle" style="padding: 5px 40px;">项目清单</div>
       <div class="project-manifest">
           <div v-for="(item, index) in project" :key="index" class="project-list" :class="{ active: index === selectedProjectIndex }" @click="projectFn(item.id,item.name)">
            <span class="num">{{ index + 1 }}</span> <span class="project-name">{{ item.name }}</span>
             </div>
       </div>
</div>

主要代码: :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%;
                    }

!!!!!!!!!!!!!!!! 2023年9月19日更新                                                          上面的代码只适用于固定数据 就是你知道你第一条数据的id的前提下使用的 下面是进阶版

还是上面那个案例

 <div class="project-manifest">
              <div v-for="(item, index) in project" :key="index" class="project-list" :class="{ 'active': selectedProjectIndex == index}"
                                @click="projectFn(item.id,index)">
                <span class="num">{{ index + 1 }}</span> <span class="project-name">{{ item.label }}</span>
               </div>
     </div>

上面使用的是id 这次使用的是index 他的下标

<div v-for="(item, index) in project" :key="index" class="project-list" :class="{ 'active': selectedProjectIndex == index}"  @click="projectFn(item.id,index)">  

还是设置动态样式 点击事件记得传递他的下标过去

const selectedProjectIndex = ref(0)

先默认设置为0下标 然后在点击事件中将下标位置一个个赋予 选中的元素 实现选中效果 

function projectFn(id, index) {
    // 默认选中样式
    selectedProjectIndex.value = index
    ...//其他代码
}

到这一步之后 你会发现刷新页面没有默认选中第一条

你记得在开局调用 或者在你开局获取展示数据的时候(就是你获取你这个列表数据的时候)调用一下projectFn方法传递                   projectFn('你想传递的id',0)      !! 这一步很关键 传递下标0

样式.active 还是跟上面一样 你自定义