#StackBounty: #javascript #comparative-review #vue.js Which of these two Vuetify Navigation Drawer prevent prop mutation workarounds se…

Bounty: 50

I am very new to Vue.js, I just stumbled on a very hard thing to do (at least for me) where Vue was complaining about mutating a prop (children shouldn’t change parent props apparently), I was about to give up at 8~ hour mark, but then it worked! then not only that, I came with another solution. Here are the two solutions:

Using watch:

const VueNavDrawerComp={
    props : ["childSideNav", "menuItems"],
    template : 
    /*html*/
    `
    <div>
        <v-navigation-drawer v-model="otherVar" absolute temporary>
            ...
        </v-navigation-drawer>
    </div>
    `,
    data(){
        return {
            otherVar : this.childSideNav
        };
    },
    watch : {
        childSideNav : function(newValue){
            this.otherVar=newValue;
        },
        otherVar : function(newValue){
            if(!newValue){
                this.$emit("ev-toggle-drawer");
            }
        }
    }
};

Using computed:

const VueNavDrawerComp={
    props : ["childSideNav", "menuItems"],
    template : 
    /*html*/
    `
    <div>
        <v-navigation-drawer v-model="computedSideNav" absolute temporary>
            ...
        </v-navigation-drawer>
    </div>
    `,
    data(){
        return {};
    },
    computed : {
        computedSideNav : {
            get(){
                return this.childSideNav;
            },
            set(newValue){
                if(!newValue){
                    this.$emit("ev-toggle-drawer");
                }
            }
        }
    }
};

Anyway, I fiddled around with some console logs, to try to see if things were firing the correct amount of times, and things like that, but I have no idea to how to find out which of the two is more optimized or have better "code taste" as the Linux guy would say.

Any experienced Vue.js can enlighten me in which is better option or if some corrections/improvements can be done?.

To clarify a bit, v-navigation-drawer is a Vuetify component, a Boolean is passed to affect the visibility of the Drawer. When the event is listened, we toggle a common shared Boolean across more components and this Boolean must be in sync with all of them.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.