[Vuejs]-Wrapping dynamically added child elements in my slot

by

0👍

✅

If you could consider creating a component for the Items. So that when you want to add a new item, you could just create a method which will invoke the item component.

I made a Code Snippet for this example.

Vue.component('MyElement', {
  template: '#element-container',
});

Vue.component('MyElementItem', {
  template: '#element-item',
  props: {
    innerText: {
      type: String,
      default: '',
    }
  }
});

new Vue({
  el: '#app',
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
    }
  },
  method: {
    // you can add a method that will add more items, then the MyElementItem component will be invoked.
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <my-element>
    <my-element-item v-for="(item, index) in items" :key="index" :inner-text="item" />
  </my-element>
</div>

<script type="text/x-template" id="element-container">
  <div>
    <slot></slot>
  </div>
</script>

<script type="text/x-template" id="element-item">
  <div>
    <p>{{ innerText }}</p>
  </div>
</script>

Leave a comment