JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <repeater v-model="data" v-slot="{ xyz }">
    <input type="text" placeholder="Username" v-model="xyz.vmodel"/>
  </repeater>
  {{ data }}
</div>

JavaScript

const Repeater = {
  template: `
    <div>
      <div v-for="(dataEntry, index) in value">
        <slot :xyz="createVModel(index)"></slot>
      </div>
    <div>
  `,
  
  props: ['value'],
  
  methods: {
    createVModel (index) {
      const that = this
      
      return {
        get vmodel () {
          return that.value[index]
        },
        
        set vmodel (value) {
          const newValue = [...that.value]
          newValue[index] = value
          that.$emit('input', newValue)
        }
      }
    }
  }
}

new Vue({
  components: {
    Repeater
  },
  
  data () {
    return {
      data: ['Red', 'Green', 'Blue']
    }
  }
}).$mount('#app')