鍍金池/ 問答/HTML5  HTML/ 使用vue過程中出現(xiàn)的問題

使用vue過程中出現(xiàn)的問題

del刪除上一行的時(shí)候，下一行如果有內(nèi)容會(huì)自動(dòng)展開，為什么，大家?guī)兔鉀Q一下，感謝！??！

以下是全部的代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>樹形視圖擴(kuò)展</title>
    <style>
        body {
            font-family: Menlo, Consolas, monospace;
            color: #444;
        }

        .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>

<p>樹形結(jié)構(gòu)</p>

<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: '#item-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: '#demo',
        data: {
            treeData: data
        }
    });
</script>
</body>
</html>
回答
編輯回答
離觴

首先，你這里的 item key 用的是數(shù)組下標(biāo)，導(dǎo)致了一個(gè)問題，刪除第二的時(shí)候，原第三個(gè)的下標(biāo)變成了2，導(dǎo)致了 click del 操作 引發(fā)了toggle 事件，切換了 open 狀態(tài)。
兩個(gè)方法解決這個(gè)問題：1. 給 @click="$emit('del', index)" 加 .stop 阻止冒泡；

                2. 修改 key 值，保證不會(huì)出現(xiàn)長(zhǎng)度修改導(dǎo)致的 復(fù)用， :key="index + model.name"
2018年9月14日 08:44