26 - v-model

[gcaraciolo]

<script setup lang='ts'>

import { ref } from "vue"

const value = ref("Hello Vue.js") // outter ref value
const VOhModel = {
  mounted(el, binding) { 
    el.value = binding.value // initialize input element value
    el.onChange = (event) => {
      // every time el changes, updates outter ref value
      value.value = event.target.value
    }
    // listen to every input change
    el.addEventListener('input', el.onChange)
  },
  unmounted() {
    // dispose input change listener to avoid memory leak
    el.removeEventListener('input', el.onChange)
  }
}
</script>

<template>
  <input v-oh-model="value" type="text" />
  <p>{{ value }}</p>
</template>