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

新手学习 Vue 官网的树形列表例子求助

  •  
  •   chuanqirenwu · 2018-04-08 14:49:01 +08:00 · 2031 次点击
    这是一个创建于 2181 天前的主题,其中的信息可能已经有所发展或是发生改变。

    大家好:

    最近在学习 Vue,模仿官网的树形视图列表例子练习,想为其增加一个删除列表项的功能,但是不知道该如何实现。我的代码如下:

    <script type="text/x-template" id="item-template">
        <li>
            <div
                    @dblclick="changeType"
                    :class="{bold: isFolder}">
                {{ model.name }}
                <span
                        @click="toggle"
                        v-if="isFolder"
                >[ {{ open ? '-' : '+' }} ]
                </span>
    			// 想点击这个按钮后删除对应的列表项
                <span
                        @click="deleteItem"
                        v-if="!isFolder"
                > [x]
                </span>
            </div>
            <ul v-show="open" v-if="isFolder">
                <item
                        v-for="(m, index) in model.children"
                        :model="m"
                        :key="index"
                />
                <li @click="add">+</li>
            </ul>
        </li>
    </script>
    
    Vue.component('item', {
            template: '#item-template',
            props: {
                model: Object
            },
            data: function () {
                return {open: false}
            },
            computed: {
                isFolder: function () {
                    return this.model.children
                }
            },
            methods: {
                toggle: function () {
                    this.open = !this.open
                },
                add: function () {
                    this.model.children.push({name: 'new stuff'})
                },
                changeType: function () {
                    if (!this.isFolder) {
                        Vue.set(this.model, 'children', []);
                        this.add()
                    }
                },
                deleteItem: function () {
    				// 不知道该如何删除被点击的按钮对应的列表项
                }
            }
        });
    

    谢谢大家的指点!

    2 条回复    2018-04-08 18:30:29 +08:00
    overflowHidden
        1
    overflowHidden  
       2018-04-08 15:35:03 +08:00
    删除事件可以传一个删除项的 index 进去,model.children 去掉相应项( splice), 重新渲染就 ok 了。建议把删除事件绑定到列表项上。
    chuanqirenwu
        2
    chuanqirenwu  
    OP
       2018-04-08 18:30:29 +08:00 via Android
    @overflowHidden 绑定到列表项点击整个列表都会删除,这不是想要的结果吧?

    我看看 index 能否获取。

    谢谢你的指点!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3163 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 12:21 · PVG 20:21 · LAX 05:21 · JFK 08:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.