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

大家好：

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

谢谢大家的指点！