0

I couldn't think of a better title, I'll try to explain it briefly & provide my example.

I'm using Vuetify as a framework and added a few v-text-field to the template. This didn't happen before, only happening in this specific component.

So, I'm getting the values of the v-model and sending them using eventBus.emit. Now, after the emit, I'm resetting the values to null. But, doing this, will update the sent data via emit which is pretty weird. I'm not re-sending them again after nullifying them.

I'm checking using console.log(payload) and the data is correct! After the v-dialog is false, this sent data gets automatically nullified. This shouldn't happen at all.

Template:

<template>
<v-dialog v-model="dialog" scrollable width="500">
    <v-card>
        <v-card-title primary-title class="title" primary-title>
            Add</v-card-title>
        <v-divider class="menu_divider_no_margin"></v-divider>
        <v-card-text>
            <v-container fill-height grid-list-lg>
                <v-form ref="form" v-model="valid" lazy-validation>
                    <v-layout wrap row fill-height>

                        <v-flex xs6>
                            <v-text-field v-model="season_payload.season.title" label="Title"></v-text-field>
                        </v-flex>

                        <v-flex xs6>
                            <v-text-field v-model="season_payload.season.number" label="Number" type="number" :rules="rules.generic" required></v-text-field>
                        </v-flex>


                    </v-layout>
                </v-form>
            </v-container>
        </v-card-text>
        <v-divider class="menu_divider_no_margin"></v-divider>

        <v-card-actions class="v-card-actions-custom-rtl">
            <v-btn flat @click.prevent="dialog = false">Close</v-btn>
            <v-btn flat @click.prevent="addItem">Add</v-btn>
        </v-card-actions>

    </v-card>
</v-dialog>
</template>

Script:

<script>
export default {
    data() {
        return {
            constants: constants,
            valid: false,
            dialog: false,
            item_payload: {
                create: true
            },
            rules: {
                generic: [v => !!v || 'Required!']
            },
            season_payload: {
                season: {
                    number: null,
                    title: null
                }
            }
        }
    },
    beforeDestroy() {
        this.$eventBus.$off('test_compo')
    },
    watch: {
        dialog(newValue) {
            if (!newValue) {
                this.item_payload.create = true

                this.season_payload.season.number = null
                this.season_payload.season.title = null

                this.$refs.form.resetValidation()
            }
        }
    },
    mounted() {
        let app = this
        app.$eventBus.$on('test_compo', (payload) => {

            app.dialog = true
        });
    },
    methods: {
        addItem() {
            let app = this
            let payload = {
                season: app.season_payload.season,
                create: app.item_payload.create
            }


            app.$eventBus.$emit("reference", payload)
            app.dialog = false
        }
    }
}
</script>

1 Answer 1

1

This is just a problem with mutating a reference type.

Let's start here:

let payload = {
    season: app.season_payload.season,
    create: app.item_payload.create
}

app is just an alias for this, the current component.

app.season_payload.season is an object. The newly created payload object has a season property that is pointing at the same object. It isn't a copy, it's the same object.

Then we have this:

this.season_payload.season.number = null
this.season_payload.season.title = null

This is updating the number and title properties of the object this.season_payload.season. This is the same object that we saw in the earlier bit of code. It's the same object, so changing it here will also impact anywhere else that is using it.

Anything that has hold of this same season object is going to get the nulling out. It is, after all, the same object.

To avoid this you'd need to create a new object somewhere along the line. There are several opportunities to do this. e.g. We could have created the payload like this:

let payload = {
    season: {
        number: app.season_payload.season.number,
        title: app.season_payload.season.title
    },
    create: app.item_payload.create
}

or:

let payload = {
    season: {...app.season_payload.season},
    create: app.item_payload.create
}

As number and title are both primitives there's no lasting link to app.season_payload.season.

Alternatively we could have written the nulling out differently:

this.season_payload.season = {
    number: null,
    title: null
}
3
  • Words literally can't describe how much you helped me. There's no way to possibly "replicate" the object without defining it again all over?
    – Jaeger
    Jul 17, 2019 at 22:46
  • 1
    @Jaeger If you wanted to make a shallow copy you could use {...season}, or use Object.assign({}, season). A common trick for deeper copies is JSON.parse(JSON.stringify(season)) but that only works if all the properties can be expressed as JSON. Various libraries, such as lodash, have utilities for handling more complicated cases but ultimately a true deep copy is not possible in JavaScript. I'll update my answer with the shallow copy version.
    – skirtle
    Jul 17, 2019 at 22:51
  • Thank you again for your follow-up!
    – Jaeger
    Jul 17, 2019 at 22:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.