4 months ago

Passing data between Vue components

Posted 4 months ago by GlenUK

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


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


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

            valueChanged() {
      '/data/store/' + this.storeID,{
                }).then(response => {
                    console.log(this.store_id + ' 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


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:

found in

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

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.