v-for 使用请求的数据 :class 判断不生效

2019-08-04 23:39:02 +08:00
 aoscici2000
<button
    v-for="catalog in catalogs"
    :key="catalog.id"
    :class="{'active': current_catalog==catalog.name}"
    @click="change(catalog.name)"
    >
    {{ catalog.name }}
</button>

data() {
    return {
        catalogs: [{id: 999, name: '不限类目'}],
        current_catalog: '不限类目'
    }
},

created() {
    $axios({
        method: 'get',
        url: '/api/catalog'
    })
    .then( resp=> {
    	this.catalogs = this.catalogs.concat(resp.data.data)
    })
},

methods: {
    change(val) {
        this.current_catalog = val
    },
}

之前问过一次, 补上代码. 需要 class="active"生效, 如果 catalogs 一开始写死, 就没问题, 但如果用请求的数据, 就没辙了. 不知道怎么解决?

3658 次点击
所在节点    Vue.js
28 条回复
donething
2019-08-05 00:04:47 +08:00
使用 Vue.set()向数组添加新元素,看看
xxx749
2019-08-05 00:10:00 +08:00
Vue 的数组变异方法里没有 concat,试试 this.catalogs = [...this.catalogs.concat, ...resp.data.data]
luckyx
2019-08-05 05:08:00 +08:00
:class="'active:'+current_catalog==catalog.name"
Exceptionluo
2019-08-05 09:06:32 +08:00
看代码应该没问题呀 建议检查下返回的数据结构
aria955
2019-08-05 09:54:56 +08:00
watch catelogs 试试看
xutao881
2019-08-05 10:35:50 +08:00
写了测试方法没问题,建议放一下返回数据结构
aoscici2000
2019-08-05 11:04:06 +08:00
@xutao881 那就相当奇怪了... 数据结构没问题的, button 里面的内容也显示正常
xutao881
2019-08-05 11:07:47 +08:00
@aoscici2000 贴一下 concat 之后的 catalogs 看看
aoscici2000
2019-08-05 11:25:05 +08:00
@xutao881 [{"id":999,"name":"不限类目"},{"id":10007,"name":"游泳"},{"id":10008,"name":"瑜伽"}......] ,直接从 Vue devtools 复制的
no1xsyzy
2019-08-05 12:30:27 +08:00
no1xsyzy
2019-08-05 12:35:21 +08:00
考虑:HTML/JS 预处理器的存在导致代码语义变化、各库版本(以 lock 文件为标准)、
aoscici2000
2019-08-05 14:08:02 +08:00
.then(resp => {
this.$set(this, 'catalogs', resp.data.data)
})
也无效
SilentDepth
2019-08-05 14:19:08 +08:00
从贴出来的代码上看,没问题。我现在只能怀疑是你的 Array.prototype.concat 有问题。

@aoscici2000 #12 this.$set( ) 不能这么用,应该是:
this.$set(this.catalogs, 1, resp.data.data[0])
// ...
aoscici2000
2019-08-05 14:40:29 +08:00
@SilentDepth 文档里#Vue.set(object, key, value) 不是这样的? 我就直接不要原本定死的那个数据了, 数据添加也能正常.

this.$set(this.catalogs, 1, resp.data.data[0]) 这个倒是有点看不懂什么意思了, 1 是什么意思?
aoscici2000
2019-08-05 14:41:23 +08:00
@no1xsyzy 晕, 这难道我在组件里用的就无效...
SilentDepth
2019-08-05 14:43:27 +08:00
@aoscici2000 #14 Vue 官方文档:

注意对象( Vue.set( ) 的 target 参数)不能是 Vue 实例,或者 Vue 实例的根数据对象。

1 是 this.catalogs 的属性名。由于它是个数组,所以属性名就是数字的形式,也就是数组下标。
jtwor
2019-08-05 15:19:09 +08:00
(current_catalog==catalog.name)
aoscici2000
2019-08-05 15:24:07 +08:00
@SilentDepth 得到的数据正常, get, set 什么的属性都有, :class 就是不工作, 放弃了

.then(resp => {
let list = resp.data.data
for (let i=0, len=list.length; i<len; i++) {
this.$set(this.catalogs, i+1, list[i])
}
})
hellomimi
2019-08-05 15:26:38 +08:00
代码没问题,console.log(resp)看看返回数据
hellomimi
2019-08-05 15:29:06 +08:00
.active 的样式、css 权重检查一下

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/589034

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX