A question regarding removing elements ... (and redraw?) - with MWE #97

eisenwinter · 2021-10-19T07:21:10Z

eisenwinter
Oct 19, 2021

Hello all,

I have an issue where i remove elements from the bound object, and while the object correctly changes (as seen in the minimal working example) the dom seems no to update, but the strange thing is its not updating depending on the order of items removed.

If you take a look at the example, if you press all buttons from bottom to top - everything works as expected; but any other direction will lead to the dom beeing stuck in a wrong display state

so my question boils down to - what am I am missing? or is there a way to force a redraw?

Minimal working example (https://jsfiddle.net/trj6s1h0/1/)

also for reference

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" integrity="sha512-EZLkOqwILORob+p0BXZc+Vm3RgJBOe1Iq/0fiI7r/wJgzOFZMlsqTa29UEl6v6U6gsV4uIpsNZoV32YZqrCRCQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <script type="module">
         import { createApp } from 'https://unpkg.com/petite-vue?module'
     
        let rootElement ={"type":"Composite","name":"Outter","children":[{"type":"List","name":"List #1","children":[{"type":"Scalar","name":"Scalar in List #1","children":[]},{"type":"Scalar","name":"Scalar in List #2","children":[]}]},{"type":"Scalar","name":"Scalar in Outter","children":[]},{"type":"Composite","name":"Composite in Outter","children":[{"type":"Scalar","name":"Scalar A","children":[]},{"type":"Composite","name":"Nested Composite","children":[{"type":"Scalar","name":"Scalar in nested","children":[]}]}]}]}
        

        function ControlRow(elm, parent){
            return {
                node: elm,
                parent: parent,
                $template: '#row',
            }
        }

        function Scalar(elm, parent){
            return {
                node: elm, 
                $template: `#scalar`,
                deleteNode(){
                    console.log('removing: ', this.node)
                    this.parent.children = this.parent.children.filter(f => f != this.node)
                }
            }
        }

        function List(elm, parent){
            return {
                node: elm, 
                $template: `#list`,
                deleteNode(){
                    console.log('removing: ', this.node)
                    this.parent.children = this.parent.children.filter(f => f != this.node)
                }
            }
        }
        
        function Composite(elm, parent){
            return {
                node: elm,
                $template: '#composite',
                parent: parent,
                deleteNode(){
                    console.log('removing: ', this.node)
                    this.parent.children = this.parent.children.filter(f => f != this.node)
                }
            }
        }
        const Root = () => Composite(rootElement);
        createApp({ Composite, ControlRow, Root,  Scalar, List, rootElement }).mount()
    </script>

 
 <div class="container" v-scope="Root()">
    <section>
     <pre>{{rootElement}}</pre>
     <hr>
    </section>
</div>

    <template id="row">
         <div v-if="node.type == 'Composite'">
            <div v-scope="Composite(node, parent)"></div>
         </div>
        <div v-else-if="node.type == 'List'">
            <div v-scope="List(node, parent)"></div>
         </div>
         <div v-else>
            <div v-scope="Scalar(node, parent)"></div>
         </div>
    </template>

    <template id="scalar">
        <div class="row">
            <div class="one-half column">
                <label>Scalar: {{node.name}}</label>
            </div>
            <div class="one-half column">
                 <button @click="deleteNode()">Remove scalar</button>
            </div>
        </div>
    </template>
    
     <template id="list">
        <div class="row">
            <div class="one-half column">
                <label>List: {{node.name}}</label>
            </div>
            <div class="one-half column">
                <button @click="deleteNode()">Remove list</button>
            </div>
        </div>

        <div class="container">
             <div v-for="n in node.children">
                <div v-scope="ControlRow(n, node)"></div>
            </div>
        </div>
    </template>


    <template id="composite">
            <div v-if="parent">
                <div class="row">
                    <div class="one-half column">
                        <label>Composite: {{node.name}}</label>
                        </div>
                        <div class="one-half column">
                            <button @click="deleteNode()"> Remove composite</button>
                        </div>
                    </div>
            </div>
            
            <div v-for="n in node.children" class="container">
                <div v-scope="ControlRow(n, node)"></div>
            </div>
    </template>
</body>