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

[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 一开始写死, 就没问题, 但如果用请求的数据, 就没辙了. 不知道怎么解决?

[rain0002009]

你把 current_catalog==catalog.name 展示出来 到底是 true 还是 false

[no1xsyzy]

如果确实替换 data() > return object > 'catalogs' 和 create() 就能解决的话（请先确认）考虑：
1. :class 内容是否写错？= 与 ==，或者 === 试一下
2. class 确认没有正确填上，而不是 #20 猜测的那样 class 填上了样式没正确应用？
3. Promise.resolve() 替换一下试试？
4. 将 active 的判断转化为 ((x,y)=>{console.log(x,y,x==y);return x==y})(current_catalog,catalog.name)，来 hook 进去打一下 log

[yang137162692]

this.catalogs = this.catalogs.concat(resp.data.data) 更新数组 使用 concat 不会触发 vue 更新

[hellomimi]

https://jsbin.com/dufotafico/1/edit?html,css,js,output

v2 不敢提前端，惨不忍睹

[mikoshu]

数组用 push 进去 才会监听到变动

[wlor]

Vue 2.0 是基于 Object.defineProperty 对对象实现“响应式化”，而对于数组，Vue 提供的方法是重写 push、pop、shift、unshift、splice、sort、reverse 这七个数组方法 你用 concat 是监听不了的 要用的话用 Vue,$set 你的$set 用错了 而且不建议你用 concat 方法 性能很差

[no1xsyzy]

@wlor @yang137162692 @mikoshu
所以说现在我很怀疑 v2 前端水平
Array::concat 不是变异方法，调用完原数组不变的
触发变动的是对 this.catalogs 全量赋值，不然我 #10 的例子和 #24 的例子为什么能正常工作？
另一方面印证，楼主仅仅是 :class 不能正常工作，而不是 v-for，所以可见给 this.catalogs 赋值正常工作了。

[yang137162692]

@no1xsyzy 嘿嘿，不好意思，不会再随意回复了