Problem getting updated value from child component to the parent component in a Laravel 9 with Vue

user_761100 0
Viewed 242

I am using a Laravel 9 application with Vue 3. I have created a fresh install. I want to create some components that I want to use in a parent component. The first component that I want to create is which will be passed a value (postal code) and the component will format and validate the passed value. The parent component should have access to the updated formatted value.

As a first step, I have created the postal-code-component using the documentation from vuejs.org.

<!-- postalcode.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

<template>
  <input v-model="value" />
</template>

Next, I made a copy of the example-component, that comes with the Laravel Vue installation to create a data element "postalcode" and use as a v-model for ,

    <div class="card-body">
        <postal-code-input v-model="postalcode" /> {{ postalcode }}
    </div>
</template>

<script>
    export default {
    data(){
        return {
            postalcode:'l3r3g',
        }
    },
}

When I run my app, it displays the initial value (l3r3g) in the input box and also the same value at {{postalcode}}. However, when I update the value in the input box, it does not update {{postalcode}} in the parent component. When I inspect the component in vue dev tools, I see that modelValue and computed 'value' are undefined, as shown

enter image description here

I just don't know what is going on. I shall appreciate any help to fix this issue.

vue-component laravel
2 Answers

I've tried by using watcher instead of computed property because the computed properties made cache and sometime it's set() method created complications in debugging reactivity.

Following snippet works for me:


// PostalCode.vue

<template>
    <div class="input-group  input-group-merge mb-3">
        <input
            v-model="postalCode"
            type="text" class="form-control"
            id="postal_code" name="postal_code"
        />
    </div>
</template>

<script>
export default {
    name: "PostalCode",

    props: {
        modelValue: String,
    },

    data() {
        return {
            postalCode: null
        }
    },

    watch: {
        // watching prop
        modelValue: {
            handler: function (newValue) {
                if (newValue) {
                    this.postalCode = newValue;
                }
            },
            immediate: true,
        },

       // watching data() property
        postalCode: {
            handler: function (newValue, old) {            
                this.$emit('update:modelValue', newValue)
            },
            immediate: true
        }
    }
}
</script>

Usage:

<postal-code v-model="user.postal_code"/>

Your can also place your formatting logic within any watcher also.

Hint/Suggestion:

depending on requirement, if you want to do formatting on props change by parent (for old and new both) then place formatting logic in modelValue watcher.

Note:

Following snippet works perfectly on Vue3

user_127196160

If you’re using v-model to bind a prop like this

<postal-code-input v-model="postalcode" />

The postal-code component should emit ‘input’ and have a value prop. You can use a different prop and event but then you should avoid the v-model binding and just do something like this

<postal-code-input :modelValue="postalcode" @modelValueUpdate=“handleUpdate” />
user_49201050
Related