JSFiddle - React, Tailwind, and code Playground

by Lien Z

HTML

<div id="app">
  <h3>All Parent</h3>
  <hr>
  <template v-for="(parent, index) in parents">
    <component 
      :is="parentComponent" 
      :index="index"
      :parent="parent">
    </component>
  </template>
</div>

<!-- Child tmpl Start -->
<script type="text/template" id="child">
  <div>
    <span>{{ value }}</span>
    <input type="text" name="value-text" v-model="">
  </div>
</script>
<!-- Child tmpl End -->

<!-- Parent tmpl Start -->
<script type="text/template" id="parent">
  <div>
    name: <span>{{ parent.name }}</span>
    <child></child>
  </div>
</script>
<!-- Parent tmpl End -->


<!-- data supposed to load from remote -->
<script>
  const appData = {
    parent1: {
      name: "parent1",
      children: {
        child1: {
          value: "child1"
        },
        child2: {
          value: "child2"
        }
      }
    },
    parent2: {
      name: "parent2",
      children: {
        child1: {
          value: "child1"
        },
        child2: {
          value: "child2"
        }
      }
    },
    parent3: {
      name: "parent3",
      children: {
        child1: {
          value: "child1"
        },
        child2: {
          value: "child2"
        }
      }
    }
  }

</script>