(VueJS) Update parent data from child component

Question

I have a parent who's passing props to a child and the child emits events to the parent. However this is not fully working and I am not sure why. Any suggestions?

Parent:

<template>
<div class="natural-language">
    <div class="natural-language-content">
        <p class="natural-language-results">
            <msm-select :options="payments" :model="isShowingUpdate" />
        </p>
    </div>
</div>
</template>

<script>
import msmSelect from '../form/dropdown.vue'

export default {
    components: {
        'msm-select': msmSelect
    },
    data() {
        return {
            isShowingUpdate: true,
            payments: [
                {'value': 'paying anuualy', 'text': 'paying anuualy'},
                {'value': 'paying monthly', 'text': 'paying monthly'}
            ],
        }
    }
}
</script>

Child:

<template>
<div class="form-pseudo-select">
    <select :model="flagValue" @change="onChange($event.target.value)">
        <option disabled value='Please select'>Please select</option>
        <option v-for="(option, index) in options" :value="option.value">{{ option.text }}</option>
    </select>
</div>
</template>

<script>
export default {
    props: {
        options: {
            elType: Array
        },
        isShowingUpdate: {
            type: Boolean
        }
    },
    data() {
        return {
            selected: '',
            flagValue: false
        }
    },
    methods: {
        onChange(value) {
            if (this.selected !== value) {
                this.flagValue = true;
            } else {
                this.flagValue = false;
            }
        }
    },
    watch: {
        'flagValue': function() {
            console.log('it changed');
            this.$emit('select', this.flagValue);
        }
    },
    created() {
        console.log(this.flagValue);
        this.flagValue = this.isShowingUpdate;
    }
}
</script>

Basically, when the option in the select box changes, the boolean flag should be updated. However, in my child I am getting undefined for isShowingUpdate. What am I missing?

JP. Aulet · Accepted Answer · 2017-11-02 15:28:14Z

There isn't the relation that you said between the two components.

The component that you called parent is in reality the child... and the child is parent.

The parent component is always the one that calls the other, in your case:

//Parent component
<template>
 ...
  <msm-select :options="policies" :model="isShowingUpdate" /> << the child
 ...
</template>

You should change the props/events between the two components.

Edit:

You can edit the:

onChange(value) {
            if (this.selected !== value) {
                this.flagValue = true;
            } else {
                this.flagValue = false;
            }
        }

To a new one like the following:

On the children:

onChange(value) {
            if (this.selected !== value) {
                this.flagValue = true;
            } else {
                this.flagValue = false;
            }
            this.$emit('flagChanged', this.flagValue)
        }

On the parent use the emit event to capture and call some other method:

//HTML part:
    <msm-select :options="payments" :model="isShowingUpdate" v-on:flagChanged="actionFlagChanged" />

//JS part:
    methods: {
        actionFlagChanged () {
             //what you want
        }
    }

Can I give you some tips?

It's not a (very) good name of a function the one called: onChange inside a onChange event... try something like: updateFlag (more semantic).
I think that you can delete the watch part and do it in the onChange event
Try to find a good documentation/tutorial (i.e the official documentation) to learn more about parent/child communication.

Remember to add the event-bus import:

import { EventBus } from './event-bus'

Hope it helps!

Hi @JP. Aulet. What you said above makes perfect sense and I've amended my code. However, I am still unable to pass the prop value from the parent to the child (getting undefined). Would it help if I post my updated code?
Yes, update the code in order to get better help for the community! But maybe first try to read a little about parent-children comunication between components (double data binding, props, events, etc.)

Collectives™ on Stack Overflow

(VueJS) Update parent data from child component

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related