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

v-for 嵌套 v-show 的问题,不能动态改变?

  •  
  •   amourz · 2017-08-22 15:59:56 +08:00 · 6146 次点击
    这是一个创建于 2648 天前的主题,其中的信息可能已经有所发展或是发生改变。
    模板部分:
    <template>

    <ul v-for="item in list">
    <li v-show="item.show">
    {{item.name}}
    </li>
    </ul>
    </template>
    语法部分:
    export default{
    data() {
    return {
    list:[{name:'张三',show:true},{name:'李四',show:true},{name:'王五',show:true}]
    }
    }
    }
    初始化时没问题,然后我在一个 button 上绑定了 click 事件,单击使 list[1].show=false,按理李四这条记录应该被隐藏啊,为什么不起作用呢?
    5 条回复    2017-08-22 16:28:42 +08:00
    wenzichel
        1
    wenzichel  
       2017-08-22 16:03:19 +08:00   ❤️ 1
    文档里也说了,修改数组中的值,不能直接对数组的下标进行操作,而是用`Vue.set`

    ```javascript
    var item = list[index];
    item.show = false;
    Vue.set(list, index, item);
    ```

    vue 新手,代码轻喷
    yangff
        2
    yangff  
       2017-08-22 16:18:06 +08:00 via Android
    首先你这个 v-for 要用在<li>上吧?
    yangff
        3
    yangff  
       2017-08-22 16:21:11 +08:00 via Android
    然后你倒是贴个完整代码啊。。
    amourz
        4
    amourz  
    OP
       2017-08-22 16:23:12 +08:00
    谢谢,确实要 set 后才行,感谢解惑
    amourz
        5
    amourz  
    OP
       2017-08-22 16:28:42 +08:00
    @wenzichel 谢谢,确实要 set 后才行,感谢解惑
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1807 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 16:30 · PVG 00:30 · LAX 08:30 · JFK 11:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.