How to change value in main vuetify app from component vue

Question

I have two vue files, app.vue and logincomponent.vue.

I use logincomponent.vue to make template that does login box and uses scripts to communicate with go backend in wails, the code itself works, but I'm trying to change value in main app.vue but i cant get it working.

The question is: "How do I change value of variable in main vue app from component?"

Import:

    import LoginScreen from "./components/LoginScreen.vue"

Variable:

        data: () => ({
            drawer: false,
            currentScreenID: 0,
            logged: false

Setter:

sendLogin: function () {
                var self = this;
                if (this.$refs.login_form.validate()) {
                    self.dialog = true;
                    self.loadingCircleLogin = true;
                    self.login_dialog_title = self.login_dialog_logging_title;
                    window.backend.sendLoginToBackend(self.email, self.password, self.remember_email).then(result => {
                        if (result === false) {
                            self.loadingCircleLogin = false;
                            self.loginFailText = true;
                            self.login_dialog_title = self.login_dialog_error_title;
                        } else {
                            self.dialog = false;
                            self.currentScreenID = 3;
                        }
                    })
                }
            },

Lautaro Ramos Lautaro Ramos · Accepted Answer · 2020-02-15T19:34:50

The short answer to if the state of the parent component (or main Vue instance) can be changed from a child component, is no or at least it should not be done. It's an anti-pattern and can produce bugs in your code.

But you have two choices here.

To emit an event from child component, and handling it from parent. So the parent is responsible of changing its own state with its own logic. When you need to change a value from the main instance from a child component, you emit the event, even with a value you can pass to the emit function, and you program your main instance to listen that event and respond accordingly. More info here: listening to child component events.
To add a Vuex store to your app. In this way you abstract the state of the app that's common to several components. So your child component could ask the store to change certain state. More info here: Vuex

Using Vuex is more complex dough, if your app is simple I'd go with first option.

How to change value in main vuetify app from component vue

Import:

Variable:

Setter:

1 Answers