Я новичок в vue.js, и я пытаюсь создать компонент navbar, который показывает кнопку Login
, когда пользователь не аутентифицирован. Вот код:
<template>
<div class="row">
<div class="container">
<div v-if="token">
<br>
<router-link to="/login">
<button> Login</button>
</router-link>
</div>
<router-link to="/" >
<img class="img-responsive" src="../assets/img/logo.png">
</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Navbar',
props: {
msg: String
},
data: function() {
},
computed: {
token () {
return this.$store.getToken;
},
},
}
</script>
Тем не менее, я получаю эту ошибку в консоли:
vue.runtime.esm.js?2b0e:3456 Uncaught TypeError: Cannot use 'in' operator to search for 'token' in undefined
at initComputed (vue.runtime.esm.js?2b0e:3456)
at initState (vue.runtime.esm.js?2b0e:3311)
at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:4624)
at new VueComponent (vue.runtime.esm.js?2b0e:4794)
at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:4306)
at init (vue.runtime.esm.js?2b0e:4127)
at createComponent (vue.runtime.esm.js?2b0e:5604)
at createElm (vue.runtime.esm.js?2b0e:5551)
at createChildren (vue.runtime.esm.js?2b0e:5678)
at createElm (vue.runtime.esm.js?2b0e:5580)
token
определяется в магазине, а getToken
определяется в магазине как:
getters: {
getToken: state => {
return state.token;
}
},
Если я удалил часть comuted
, вместо этого я получаю это предупреждение:
[Vue warn]: Property or method "token" is not defined on the instance but referenced during render.
Как я могу исправить эту проблему?