新人请教 如何默认选中 vue 中 for 循环出来的数据的第一项

[NotreDame]

循环出来的数据是填充左侧边栏的，如何默认选中第一个数据呢？ li v-for="debtor in filteredDebtors" :key="debtor.id" class="debtor-list-item"

这个档次的前端代码，对于只写 Java 的我太难了。各位大佬有兴趣的话可以看一下下面的截图（不会在 V2EX 上发图...）。链接: https://pan.baidu.com/s/14VeL08GIUrer-bpCQHOPOQ 提取码: wkvm

[murmur]

for 是可以用 item,index 这样的进行循环，有了 index 判断条件就可以了

[bojackhorseman]

index 了解一下，(debtor, index) in blablabla

[NotreDame]

@murmur
@bojackhorseman 多谢，我去了解下，

[bojackhorseman]

@NotreDame #3 設置一個變量為選中項的 index，默認為 0

[virtual2019]

获取到数据以后
this.currentSelected = this.filteredData[0]?.id

然后 v-for 里用 debtor.id 等不等于 currentSelected 判断

[learnshare]

跟 v-for 没关系，应该另指定一个数据 selected
在获取到列表之后，初始化 selected = list[0].value

[murmur]

li v-for="(debtor,index) in filteredDebtors" :key="debtor.id" class="debtor-list-item" :selected="index == 0"
或者
li v-for="(debtor,index) in filteredDebtors" :key="debtor.id" class="{'debtor-list-item': true, selected: index ==0}"
长得应该是这 2 个之一
什么叫 v-for 没关系，vue 的模板还是挺强大的

[murmur]

第二条的 class 用变量形式:class

[murmur]

突然发现 6 楼说的可能是对的，你是要做一个菜单么，那你需要一个默认值的变量，index 就不是跟 0 比了，是跟 data 里的比如 selectedIndex，然后菜单的 @click 去改 selectedIndex 的值

[sivacohan]

用模版的 for index 是可行的。
我个人更倾向于使用 computed，给列表里面增加一个 seleced 的 key，值为 true/false。这样，无论后续是单选还是多选或者是 radio，都不用动逻辑了。
同时，这样做也符合 vue 逻辑和模版分离的原则。

[daguaochengtang]

<li v-for="(item, index) in list" :key="item.id" :class="['list-item', index===curIndex ? 'active' : '']"></li>

data() {
return {
curIndex: 0
}
}

class 部分，因为有固定的，也有动态的。可以用数组，也可以用对象`:class="{'list-item': true, 'active': index === curIndex}"`

[shintendo]

不建议用 index 比较

你的数据有两个：表示可选项的 filteredDebtors，和表示选中项的 selectedDebtorId

你的模版只需要忠实反映数据，即“循环渲染列表项，其中选中的项有特殊样式”

li v-for="debtor in filteredDebtors" :key="debtor.id" class="debtor-list-item" :class="{'debtor-list-item-highlight': debtor.id===selectedDebtorId}"

至于“默认选中第一项”，无非是初始化 selectedDebtorId = filteredDebtors[0].id 而已

[shintendo]

@nikolausliu
class 和:class 可以一起写的，固定的部分都写 class 里

[NotreDame]

@shintendo 可能也是我描述有问题。遍历出来的对象在左边栏菜单展示，我期望时当打开这个页面时，把左边栏菜单自动填充，同时右边栏自动展开“左边栏第一项”的详情。

[shintendo]

@NotreDame 一样的呀，你的右边栏展示的是 selectedDebtorId 对应的那一项的详情，对吧，你写个 computed 叫 selectedDebtor，根据当前的 selectedDebtorId 返回那一项，右边栏渲染这个 selectedDebtor 就好了