Как я могу изменить значение данных приложения Vue из метода? - PullRequest
Новая
       20

Как я могу изменить значение данных приложения Vue из метода?

0 голосов
/ 24 марта 2020

У меня есть этот метод, который я использую для аутентификации, и я хочу изменить Navbar моего сайта на дочерний компонент, когда пользователь вошел в систему. Для этого я должен иметь возможность изменить значение data (), но это кажется невозможным. 

<template>
        <div id="navbar">
          <component v-bind:is='component'></component>
        </div>
</template>

<script>
import axios from 'axios'
import auth_mixin from '../mixins/auth_mixin.js'
import NavbarLoggedOut from '@/components/navbar_children/NavbarLoggedOut.vue'
import NavbarLoggedIn from '@/components/navbar_children/NavbarLoggedIn.vue'
import NavbarAdmin from '@/components/navbar_children/NavbarAdmin.vue'

export default {
  name: 'Navbar',
  components: {
    'loggedout':NavbarLoggedOut,
    'loggedin':NavbarLoggedIn,
    'admin':NavbarAdmin
  },
  mixins: [auth_mixin],
  created () {
    this.checkIfLoggedIn()
  },
  data() {
    return{
      component:''
    }
  },
  methods: {
      async checkIfLoggedIn () {
            var result = null;
            var token = this.getCookie("token")
            var jsonData = {}
            jsonData["token"] = token
            var bodyFormData = new FormData();
            bodyFormData.append('data', JSON.stringify(jsonData));
            await axios({
                    method: 'post',
                    url: 'backend/index.php?action=checkAuth',
                    data: bodyFormData,
                    headers: {'Content-Type': 'multipart/form-data'}
                    })
                    .then(function (response) {
                      console.log(response);
                      if(response.data.status==="OK"){
                        this.component="loggedin"
                      }else{
                        this.component="loggedout"
                      }
                    })
                    .catch(function (response) {
                        console.log(response);
                    });
    }
  }
}
</script>

Есть ли способ сделать это правильно или вы, ребята, порекомендовали бы другое решение для реализации различных компонентов, как только пользователь вошел в систему?

1 Ответ

0 голосов
/ 24 марта 2020

Экземпляр Vue this не будет работать внутри обычных функций, которые вы используете в качестве обратного вызова. Это может быть проблемой в коде. Вы можете использовать функцию стрелки для обратного вызова или объявить переменную вне присвоения переменной this, и можете использовать переменную внутри функции.

Пожалуйста, проверьте код ниже для обоих решений

Использование функции стрелки 

async checkIfLoggedIn() {
    var result = null;
    var token = this.getCookie("token")
    var jsonData = {}
    jsonData["token"] = token
    var bodyFormData = new FormData();
    bodyFormData.append('data', JSON.stringify(jsonData));
    await axios({
        method: 'post',
        url: 'backend/index.php?action=checkAuth',
        data: bodyFormData,
        headers: {'Content-Type': 'multipart/form-data'}
    })
        .then((response) => {
            console.log(response);
            if (response.data.status === "OK") {
                this.component = "loggedin"
            } else {
                this.component = "loggedout"
            }
        })
        .catch((response) => {
            console.log(response);
        });
}

Объявление другой переменной для this

        async checkIfLoggedIn() {
            var result = null;
            var token = this.getCookie("token");
            var jsonData = {};
            jsonData["token"] = token;
            var bodyFormData = new FormData();
            let vue = this;
            bodyFormData.append('data', JSON.stringify(jsonData));
            await axios({
                method: 'post',
                url: 'backend/index.php?action=checkAuth',
                data: bodyFormData,
                headers: {'Content-Type': 'multipart/form-data'}
            })
                .then(function (response) {
                    console.log(response);
                    if (response.data.status === "OK") {
                        vue.component = "loggedin"
                    } else {
                        vue.component = "loggedout"
                    }
                })
                .catch(function (response) {
                    console.log(response);
                });
        }
...