amourz
V2EX  ›  Vue.js

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

  •  
  •   amourz · Aug 22, 2017 · 6645 views
    This topic created in 3210 days ago, the information mentioned may be changed or developed.
    模板部分:
    <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 replies    2017-08-22 16:28:42 +08:00
    wenzichel
        1
    wenzichel  
       Aug 22, 2017   ❤️ 1
    文档里也说了,修改数组中的值,不能直接对数组的下标进行操作,而是用`Vue.set`

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

    vue 新手,代码轻喷
    yangff
        2
    yangff  
       Aug 22, 2017 via Android
    首先你这个 v-for 要用在<li>上吧?
    yangff
        3
    yangff  
       Aug 22, 2017 via Android
    然后你倒是贴个完整代码啊。。
    amourz
        4
    amourz  
    OP
       Aug 22, 2017
    谢谢,确实要 set 后才行,感谢解惑
    amourz
        5
    amourz  
    OP
       Aug 22, 2017
    @wenzichel 谢谢,确实要 set 后才行,感谢解惑
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1005 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 18:46 · PVG 02:46 · LAX 11:46 · JFK 14:46
    ♥ Do have faith in what you're doing.