<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
1
imydou 2019-08-04 19:47:21 +08:00 via Android
去掉{}
|
3
SEARCHINGFREE 2019-08-04 19:55:34 +08:00 via iPhone
去掉单引号?
|
4
murmur 2019-08-04 19:57:22 +08:00
先 forceUpdate,如果可以的话说明语法没问题,然后打印 data 里的东西,看看每一项是不是都带了 getter 和 setter
|
5
googleGirl 2019-08-04 21:06:31 +08:00
在 data()里面定义的时候 catalog 的时候需要有_catalog,name 这两个属性。
否则 vue 不会给你更新 |
6
beyond99 2019-08-04 21:29:37 +08:00 via Android
:key 的值为 id,也就是说 vue 根据 id 来判断数组数据有无变化,如果没变化就不会重新渲染。
|
7
loading 2019-08-04 21:36:08 +08:00 via Android
watch
|
8
aoscici2000 OP @beyond99 index 也一样不行
|
9
aoscici2000 OP @SEARCHINGFREE 引号没影响, 引号貌似只是允许你使用 - 罢了?
|
10
FakeLeung 2019-08-04 21:49:38 +08:00
|
12
aoscici2000 OP @murmur 似乎都没什么毛病, 我还额外设置了一个'不限类目'的选项, 那个是正常的, 而且我还试了一下不用 catalog.name, 直接指定一个已知的 catalog, 那个也可以正常...
|
13
FakeLeung 2019-08-04 21:51:37 +08:00
|
14
ccfoucs 2019-08-04 22:03:10 +08:00
看起来没毛病,但是 catalogs 的元素初始化的时候必须含有 name 属性,name 属性后加的不行
|
15
beyond99 2019-08-04 22:39:06 +08:00
@aoscici2000 index 确实不行,因为数组没变化呀,这种方式强制刷新数组吧,key 用时间戳或者随机字符串, 每次 change 的时候 key 全部用新的
|
16
beyond99 2019-08-04 22:40:31 +08:00
@aoscici2000 性能上有一定的损耗,但是功能能实现,不知道哪位大佬有更好的方式
|
17
aoscici2000 OP @ccfoucs 额, 这个 catalogs 就是 axios 请求过来才有的.
|
18
aoscici2000 OP @FakeLeung 我的 catalogs 是 ajax 请求回来的数据, 可能是这个原因才不行
|
19
FakeLeung 2019-08-04 22:58:48 +08:00
@aoscici2000 #18
最好把所有代码放上来吧。 |
20
SilentDepth 2019-08-05 12:20:48 +08:00
如果 catalogs 是异步数据,那么在 v-for 执行时数组内容为空,Vue 无法绑定 watcher,自然也不能实现响应式更新。
解决办法是,异步请求返回 catalogs 内容后,用 this.$set( ) 或者 Vue.set( ) 写入数据到 catalogs 中,强制 Vue 刷新 watcher。 |
21
aoscici2000 OP @SilentDepth this.$set 也试过了,也是一样死活不响应
|
22
SilentDepth 2019-08-05 12:48:41 +08:00
刚注意到我上面说的不准确,调用 catalogs 的变异方法或直接对 catalogs 赋值是可以触发响应式更新的,只有直接访问数组元素内容时才不行。
但不管怎样 this.$set( ) 不应当失败。还是需要你发出来代码看一下。 |
23
aoscici2000 OP @SilentDepth 代码发在另外一个帖上 https://www.v2ex.com/t/589034 回复里更改了 this.$set(this, 'catalogs', resp.data.data)
|