Question

percentage

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

<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>

Answer 1

棒球
您正在调用不存在的方法显示，这就是您收到该错误的原因。
据我了解你的问题，你想在特定路线上隐藏该组件吗？
如果是，您需要创建computed变量，以确定是否应显示该变量。 e.g：

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

只需使用它：<bottomBar v-if='toShowOrNotToShow' ></bottomBar>

Vue js 2隐藏共享组件

1 个答案: