[Vuejs]-How to pass data into child component, display in input field, and subsequently be able to submit the edited input? (Vue)

by

0👍

✅

First:

if (this.workshop) {

is not defined anywhere, nor in props, nor in data, so it will be undefined.

Then, for the patter you’d like to have, the best solution would be to use computed properties with getter and setter. Take a look here:

https://v2.vuejs.org/v2/guide/computed.html#Computed-Setter

0👍

Your problem here is that your modal component had already been rendered and the computed and created hooks are only triggered once. To solve this, every time a the prop changes workShopItem and then create a separate method to initialize your child component’s properties once that prop changed

props: ['workShopImte'],

methods: {
    initialize() {
        if (this.workshop) {
            this.title = this.workshopItem.title
            this.description = this.workshopItem.description
            this.venue = this.workshopItem.venue
        }
    }
},

watch: {
    workShopItem: {
        handle() {
            this.initialize()
        },
        immediate: true
    }
}

This way every time the prop changed, your child component’s property will get updated accordingly.

Cheers!

Leave a comment