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>
有没有一种方法可以正确地做到这一点，或者一旦用户登录，你们会推荐另一种实现不同组件的解决方案吗？
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);
});
}