首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
vue.js
aoscici2000
V2EX  ›  Vue.js

v-for :class 更改后无效?

  •  
  •   aoscici2000 · 170 天前 · 1153 次点击
    这是一个创建于 170 天前的主题,其中的信息可能已经有所发展或是发生改变。
    
    <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

    23 回复  |  直到 2019-08-05 14:10:06 +08:00
    imydou
        1
    imydou   170 天前 via Android
    去掉{}
    imydou
        2
    imydou   170 天前 via Android
    @imydou 抱歉,看错
    SEARCHINGFREE
        3
    SEARCHINGFREE   170 天前 via iPhone
    去掉单引号?
    murmur
        4
    murmur   170 天前
    先 forceUpdate,如果可以的话说明语法没问题,然后打印 data 里的东西,看看每一项是不是都带了 getter 和 setter
    googleGirl
        5
    googleGirl   170 天前
    在 data()里面定义的时候 catalog 的时候需要有_catalog,name 这两个属性。
    否则 vue 不会给你更新
    beyond99
        6
    beyond99   170 天前 via Android
    :key 的值为 id,也就是说 vue 根据 id 来判断数组数据有无变化,如果没变化就不会重新渲染。
    loading
        7
    loading   170 天前 via Android
    watch
    aoscici2000
        8
    aoscici2000   170 天前
    @beyond99 index 也一样不行
    aoscici2000
        9
    aoscici2000   170 天前
    @SEARCHINGFREE 引号没影响, 引号貌似只是允许你使用 - 罢了?
    FakeLeung
        10
    FakeLeung   170 天前
    老铁,先检查一下你的拼写。。。

    FakeLeung
        11
    FakeLeung   170 天前
    @FakeLeung #10
    好吧,看花眼了。。。。
    aoscici2000
        12
    aoscici2000   170 天前
    @murmur 似乎都没什么毛病, 我还额外设置了一个'不限类目'的选项, 那个是正常的, 而且我还试了一下不用 catalog.name, 直接指定一个已知的 catalog, 那个也可以正常...
    FakeLeung
        13
    FakeLeung   170 天前
    试了一下,是没有问题,应该是你代码哪里出错了。

    ccfoucs
        14
    ccfoucs   170 天前
    看起来没毛病,但是 catalogs 的元素初始化的时候必须含有 name 属性,name 属性后加的不行
    beyond99
        15
    beyond99   170 天前
    @aoscici2000 index 确实不行,因为数组没变化呀,这种方式强制刷新数组吧,key 用时间戳或者随机字符串, 每次 change 的时候 key 全部用新的
    beyond99
        16
    beyond99   170 天前
    @aoscici2000 性能上有一定的损耗,但是功能能实现,不知道哪位大佬有更好的方式
    aoscici2000
        17
    aoscici2000   170 天前
    @ccfoucs 额, 这个 catalogs 就是 axios 请求过来才有的.
    aoscici2000
        18
    aoscici2000   170 天前
    @FakeLeung 我的 catalogs 是 ajax 请求回来的数据, 可能是这个原因才不行
    FakeLeung
        19
    FakeLeung   170 天前
    @aoscici2000 #18
    最好把所有代码放上来吧。
    SilentDepth
        20
    SilentDepth   169 天前
    如果 catalogs 是异步数据,那么在 v-for 执行时数组内容为空,Vue 无法绑定 watcher,自然也不能实现响应式更新。

    解决办法是,异步请求返回 catalogs 内容后,用 this.$set( ) 或者 Vue.set( ) 写入数据到 catalogs 中,强制 Vue 刷新 watcher。
    aoscici2000
        21
    aoscici2000   169 天前 via iPhone
    @SilentDepth this.$set 也试过了,也是一样死活不响应
    SilentDepth
        22
    SilentDepth   169 天前
    刚注意到我上面说的不准确,调用 catalogs 的变异方法或直接对 catalogs 赋值是可以触发响应式更新的,只有直接访问数组元素内容时才不行。

    但不管怎样 this.$set( ) 不应当失败。还是需要你发出来代码看一下。
    aoscici2000
        23
    aoscici2000   169 天前
    @SilentDepth 代码发在另外一个帖上 https://www.v2ex.com/t/589034 回复里更改了 this.$set(this, 'catalogs', resp.data.data)
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2634 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 27ms · UTC 01:46 · PVG 09:46 · LAX 17:46 · JFK 20:46
    ♥ Do have faith in what you're doing.