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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1781 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

第 1 条附言 · 2020-01-09 16:49:54 +08:00

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

选中

默认

Vue

v-for

15 条回复 • 2020-01-09 18:23:30 +08:00

murmur

2020-01-09 16:15:18 +08:00

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

bojackhorseman

2020-01-09 16:17:30 +08:00

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

NotreDame

2020-01-09 16:18:32 +08:00

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

bojackhorseman

2020-01-09 16:20:18 +08:00

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

virtual2019

2020-01-09 16:29:09 +08:00 via iPhone

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

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

learnshare

2020-01-09 16:32:02 +08:00

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

murmur

2020-01-09 16:34:53 +08:00

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

2020-01-09 16:35:27 +08:00

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

murmur

2020-01-09 16:37:59 +08:00

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

sivacohan

2020-01-09 16:41:07 +08:00 via iPhone

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

daguaochengtang

2020-01-09 16:54:37 +08:00

<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

2020-01-09 17:05:40 +08:00

不建议用 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

2020-01-09 17:09:49 +08:00

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

NotreDame

2020-01-09 18:17:03 +08:00

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

shintendo

2020-01-09 18:23:30 +08:00

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

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

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