JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <todo-item 
        v-model:todo="items[index]"
      ></todo-item>
    </li>
  </ul>
  {{ items }}
</div>

JavaScript

const app = Vue.createApp({
  data () {
    return {
      items: [
        { text: 'First' },
        { text: 'Second' },
        { text: 'Third' }
      ]    
    }
  }
})

app.component('TodoItem', {
  emits: ['update:todo'],
  
  props: {
    todo: {
      type: Object,
      required: true
    }
  },

  template: `
    <input v-model="text">
  `,
  
  computed: {
    text: {
      get () {
        return this.todo.text
      },
      set (text) {
        this.$emit('update:todo', {
          ...this.todo,
          text
        })
      }
    }
  }
})

app.mount('#app')