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

v-for :class 更改后无效?

  •  
  •   aoscici2000 · 43 天前 · 897 次点击
    这是一个创建于 43 天前的主题,其中的信息可能已经有所发展或是发生改变。
    
    <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
        1
    imydou   43 天前 via Android
    去掉{}
        2
    imydou   43 天前 via Android
    @imydou 抱歉,看错
        3
    SEARCHINGFREE   43 天前 via iPhone
    去掉单引号?
        4
    murmur   43 天前
    先 forceUpdate,如果可以的话说明语法没问题,然后打印 data 里的东西,看看每一项是不是都带了 getter 和 setter
        5
    googleGirl   43 天前
    在 data()里面定义的时候 catalog 的时候需要有_catalog,name 这两个属性。
    否则 vue 不会给你更新
        6
    beyond99   43 天前 via Android
    :key 的值为 id,也就是说 vue 根据 id 来判断数组数据有无变化,如果没变化就不会重新渲染。
        7
    loading   43 天前 via Android
    watch
        8
    aoscici2000   43 天前
    @beyond99 index 也一样不行
        9
    aoscici2000   43 天前
    @SEARCHINGFREE 引号没影响, 引号貌似只是允许你使用 - 罢了?
        10
    FakeLeung   43 天前
    老铁,先检查一下你的拼写。。。

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

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

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

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