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 
       :todo="item"
       @input="item.text = $event"
      ></todo-item>
    </li>
  </ul>
  {{ items }}
</div>

JavaScript

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

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

  template: `
    <input
      :value="todo.text"
      @input="$emit('input', $event.target.value)"
    >
  `
})

app.mount('#app')