when del deletes the previous line, the next line will automatically expand if there is any content. Why, please help solve it. Thank you!
the following is all the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
font-family: Menlo, Consolas, monospace;
color: -sharp444;
}
.item {
cursor: pointer;
}
.bold {
font-weight: bold;
}
ul {
padding-left: 1em;
line-height: 1.5em;
list-style-type: dot;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<script type="text/x-template" id="item-template">
<li>
<div :class="{bold: isFolder}" @click="toggle" @dblclick="changeType">
{{ model.name }}
<span v-if="isFolder">[{{ open ? "-" : "+" }}]</span>
<span class="bold" @click="$emit("del", index)">[del]</span>
</div>
<ul v-if="isFolder" v-show="open">
<item class="item" v-for="(item, index) in model.children" :key="index" :index="index" :model="item" @del="model.children.splice($event, 1)"></item>
<li class="add" @click="addChild">+</li>
</ul>
</li>
</script>
<ul id="demo">
<item class="item" v-for="(model, index) in treeData" :key="index" :index="index" :model="model" @del="treeData.splice($event, 1)"></item>
</ul>
<script>
var data = [
{name: "han"},
{name: "wang"},
{
name: "liu",
children: [
{name: "zhang"},
{name: "lu"}
]
}
];
Vue.component("item", {
template: "-sharpitem-template",
props: {
model: Object,
index: Number
},
data: function () {
return {
open: false
}
},
computed: {
isFolder: function () {
return this.model.children && this.model.children.length;
}
},
methods: {
toggle: function () {
if (this.isFolder) {
this.open = !this.open;
}
},
changeType: function () {
if (!this.isFolder) {
Vue.set(this.model, "children", []);
this.addChild();
this.open = true;
}
},
addChild: function () {
this.model.children.push({
name: "new child"
});
}
}
});
var demo = new Vue({
el: "-sharpdemo",
data: {
treeData: data
}
});
</script>
</body>
</html>