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: [{}, ...],
        current_catalog: ''
    }
}

如题: 当我更改 current_catalog 的时候, 好像 active 并没有生效?

页面并不刷新, change()只是更改了 current_catalog 的值和发一个 ajax

[imydou]

去掉{}

[imydou]

@imydou 抱歉，看错

[SEARCHINGFREE]

去掉单引号？

[murmur]

先 forceUpdate，如果可以的话说明语法没问题，然后打印 data 里的东西，看看每一项是不是都带了 getter 和 setter

[googleGirl]

在 data()里面定义的时候 catalog 的时候需要有_catalog,name 这两个属性。
否则 vue 不会给你更新

[beyond99]

:key 的值为 id，也就是说 vue 根据 id 来判断数组数据有无变化，如果没变化就不会重新渲染。

[loading]

watch

[aoscici2000]

@beyond99 index 也一样不行

[aoscici2000]

@SEARCHINGFREE 引号没影响, 引号貌似只是允许你使用 - 罢了?

[FakeLeung]

老铁，先检查一下你的拼写。。。

[FakeLeung]

@FakeLeung #10
好吧，看花眼了。。。。

[aoscici2000]

@murmur 似乎都没什么毛病, 我还额外设置了一个'不限类目'的选项, 那个是正常的, 而且我还试了一下不用 catalog.name, 直接指定一个已知的 catalog, 那个也可以正常...

[FakeLeung]

试了一下，是没有问题，应该是你代码哪里出错了。

[ccfoucs]

看起来没毛病，但是 catalogs 的元素初始化的时候必须含有 name 属性，name 属性后加的不行

[beyond99]

@aoscici2000 index 确实不行，因为数组没变化呀，这种方式强制刷新数组吧，key 用时间戳或者随机字符串， 每次 change 的时候 key 全部用新的

[beyond99]

@aoscici2000 性能上有一定的损耗，但是功能能实现，不知道哪位大佬有更好的方式

[aoscici2000]

@ccfoucs 额, 这个 catalogs 就是 axios 请求过来才有的.

[aoscici2000]

@FakeLeung 我的 catalogs 是 ajax 请求回来的数据, 可能是这个原因才不行

[FakeLeung]

@aoscici2000 #18
最好把所有代码放上来吧。

[SilentDepth]

如果 catalogs 是异步数据，那么在 v-for 执行时数组内容为空，Vue 无法绑定 watcher，自然也不能实现响应式更新。

解决办法是，异步请求返回 catalogs 内容后，用 this.$set( ) 或者 Vue.set( ) 写入数据到 catalogs 中，强制 Vue 刷新 watcher。

[aoscici2000]

@SilentDepth this.$set 也试过了，也是一样死活不响应

[SilentDepth]

刚注意到我上面说的不准确，调用 catalogs 的变异方法或直接对 catalogs 赋值是可以触发响应式更新的，只有直接访问数组元素内容时才不行。

但不管怎样 this.$set( ) 不应当失败。还是需要你发出来代码看一下。

[aoscici2000]

@SilentDepth 代码发在另外一个帖上 https://www.v2ex.com/t/589034 回复里更改了 this.$set(this, 'catalogs', resp.data.data)