Question

我是vue.js的新手，它试图制作导航栏组件，该组件在未通过身份验证时会显示一个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.

如何解决此问题？

未捕获的TypeError：无法使用“ in”运算符在未定义的{to}中进行搜索

0 个答案: