There are some small problems encountered in the use of vue. I hope you can help me.

1. When using update to change content, enter the field in the process of click enter, delete, space and other keys will automatically exit editing mode, is there any good way to solve this problem?
2. In addition, when deleting using delete, if the next line has content to expand, it will be automatically folded, how to solve this?

the specific code is as follows:

<!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">
            <span v-if="up">{{ model.name }}</span>
            <input v-else type="text" v-model="model.name" @click.stop>
            <span v-if="isFolder">[{{ open ? "-" : "+" }}]</span>
            <span class="bold" @click.stop="$emit("del", index)">[del]</span>
            <span class="bold" @click.stop="upd">[update]</span>
        </div>
        <ul v-if="isFolder" v-show="open">
            <item class="item" v-for="(item, index) in model.children" :key="index + item.name" :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 + model.name" :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, up: true } }, 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" }); }, upd: function () { this.up = !this.up; } } }); var demo = new Vue({ el: "-sharpdemo", data: { treeData: data } }); </script> </body> </html>
Mar.19,2021

, here I am again
with a link https://jsfiddle.net/Moonless.

.

explain why this happens. Previously, using only key and index, from index bind to item resulted in a change in the correspondence between subscript and value after splice treeData, and bubbling together led to the deletion of the next item.

but this time it also has something to do with index. The problem is solved after removing the index subscript. Because index and key of bind become dynamic, item is re-rendered, while isFolder and open are dynamically calculated, so the initial state is restored. You can add index to this demo and view the output in mounted. Of course, if you modify name, it will still cause redrawing due to changes in key

the above is the solution. Say a few more words. In this case, it is recommended that you maintain the open attribute in each item of treeData, so as to avoid the interference caused by redrawing.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b32fa7-2be40.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b32fa7-2be40.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?