[Vuejs]-Vue.js Child Component not Updating Data in Parent Component

by

0👍

Take a look at following snippet, looks ok:

const app = Vue.createApp({
  data() {
    return {
      phone: "0123456"
    }
  },
})
app.component('phoneInput', { 
  template: `
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    />
  `,
  props: ['modelValue'],
  emits: ['update:modelValue'],
})

app.mount("#demo")
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
   <phone-input v-model="phone"></phone-input>
   {{ phone }}
</div>

0👍

<script>
    export default {
    props: ['modelValue'],
}
</script>

<template>
  <input
   :value="modelValue"
   @input="$emit('input', $event.target.value)"
 />
</template>

You need specially emit input to make it work

Leave a comment