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

[chuanqirenwu]

大家好：

最近在学习 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 () {
				// 不知道该如何删除被点击的按钮对应的列表项
            }
        }
    });

谢谢大家的指点！

[overflowHidden]

删除事件可以传一个删除项的 index 进去，model.children 去掉相应项（ splice), 重新渲染就 ok 了。建议把删除事件绑定到列表项上。

[chuanqirenwu]

@overflowHidden 绑定到列表项点击整个列表都会删除，这不是想要的结果吧？

我看看 index 能否获取。

谢谢你的指点！