Vue js 2 隐藏共享组件

Question

<template>
<div id="app" class="phone-viewport">
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  <router-view></router-view>
  <bottomBar v-bind:visibles='show' ></bottomBar>

</div>
</template>

<script>
export default {

  name: '',
  show: '',

  data () {
    return {
      visibles: [
        {name: 'Football', show: true},
        {name: 'Basketball', show: true},
        {name: 'Hockey', show: true},
        {name: 'VolleyBall', show: false},
        {name: 'Baseball', show: false},

      ]
    }
  }
}
</script>

我希望在 VolleyBall 和 Beisbol 上隐藏 bottomBar。 但我总是有这个错误“属性或方法“显示”没有在实例上定义，但在渲染期间被引用。确保在数据选项中声明反应数据属性。 "

<script>
export default {

  name: 'app',

  data () {
    return {}
  },
  computed: {
    hideBottom: function () {
      if (this.$router.path === '/baseball' || this.$router.path === '/volleyball') return false
      else { return true }
    }
  }
}

Answer 1

1. 棒球
2. 您正在调用不存在的方法 show，这就是您收到该错误的原因。
3. 据我了解，您想在特定路线上隐藏该组件？
4. 如果是这样，您需要创建computed 变量来确定它是否应该显示。例如：

computed: {
   toShowOrNotToShow: function () {
      if(this.$router.path === '/baseball' || this.$router.path === '/volleyball') return false;
      else
          return true;
    }
  }

5. 随便用吧：<bottomBar v-if='toShowOrNotToShow' ></bottomBar>