时间戳

首页 > 解决方案 > 如何从方法中更改 Vue 应用程序的数据值？

javascript - 如何从方法中更改 Vue 应用程序的数据值？

问题描述

我有这个方法，用于身份验证，并且我想在用户登录时将我的站点的导航栏更改为子组件。为此，我应该能够更改我的 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>

有没有办法正确地做到这一点，或者一旦用户登录，你们会推荐另一种实现不同组件的解决方案吗？

标签： javascriptvue.jspropertiesnavbardisplay

解决方案

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);
                });
        }

推荐阅读