GlenUK
4 months ago
393
1
Vue

Passing data between Vue components

Posted 4 months ago by GlenUK

I have a StoreRow.vue file (the parent) which includes the following code:

<template>
...
     <store-text-field
            :store_id="clonedStore.id"
            relation="address"
            field="post_code"
            @value-changed="postCodeUpdated"
            :value="clonedStore.address.post_code"/>
...
</template>

<script>
    export default {
        name: "StoreRow",
        data() {
            return {
                clonedStore: '',
                showStoreNameInput: false,
            }
        },
        props: ['store', 'filterByStoreStatus', 'filterString'],
        created() {
            this.clonedStore = this.store
        },
        methods: {
            postCodeUpdated(value) {
                this.clonedStore.address.post_code = value;
            }
        },

    }
</script>

In the StoreTextField.vue file (the child) I have:

            valueChanged() {
                axios.post('/data/store/' + this.storeID,{
			...
                }).then(response => {
                    console.log(this.store_id + ' updated')
                    this.$emit('value-updated')
                })
            }

Please note, everything is working correctly, except the passing of data back to the parent. I get the following errors from vue:

app.js:22334 [Vue warn]: Invalid handler for event "value-changed": got undefined

found in

---> <StoreTextField> at resources/js/components/StoreTextField.vue
       <StoreRow> at resources/js/components/StoreRow.vue
         <Root>

and

app.js:22334 [Vue warn]: Property or method "PostCodeUpdated" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <StoreRow> at resources/js/components/StoreRow.vue
       <Root>

I am not seeing the mistake I have made. Please can someone point it out to me.

Please sign in or create an account to participate in this conversation.