vue.js - Parent variable not updated when updating trough child component

Question

I am trying to create a few custom form fields for my page and i learned that i cannot use props to do so so i am trying to find a way to update my parent component variable when i use my child component. Whe i check the parent variable it is always empty.

Here is my component:

<template>
    <input
        v-model="value"
        :placeholder="placeHolder"
        class="form-field"
    >
</template>
<script>
export default {
    props: ['placeHolder'],
    data() {
      return {
          value: ''
      }
    },
    methods: {
        updateValue(){
            this.$emit("update-text", this.value);
        }
    },
    watch: {
        value: function(){
            this.updateValue
        }
    }
}
</script>

And this is how i use the component:

<TextField placeholder="Nome" :update-text="name = value"/>

what exactly am i doing wrong? I am using vue.js with nuxt.js

question from:https://stackoverflow.com/questions/65851125/parent-variable-not-updated-when-updating-trough-child-component

Answer 1

I think a simpler approach in this case might be emitting an input event from your custom text field and binding the component to the variable using v-model.

TextField.vue

<template>
    <input
        @input="$emit('input', $event.target.value)"
        :placeholder="placeHolder"
        class="form-field"
    >
</template>
<script>
export default {
    props: ['placeHolder']
}
</script>

Usage

<template>
    <TextField placeholder="Nome" v-model="name"/>
</template>

<script>
export default {
    data: () => ({
        name: '',
    }),
}
</script>

Read more about using v-model on custom components here.