CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvue-router
user3380738
user3380738

Reputation: 83

Vue js 2 hide shared component

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

I'm looking to hide the bottomBar just on VolleyBall and Beisbol . But I always have this error "Property or method "show" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. "

<script>
export default {

  name: 'app',

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

Upvotes: 0

Views: 148

Answers (1)

Marek Urbanowicz
Marek Urbanowicz

Reputation: 13684

  1. Baseball
  2. You are calling method show which does not exist, that's why you are getting that error.
  3. As I understand your question, you want to hide that component on particular routes?
  4. If so, You need to create computed variable which will determine if it should be shown or not. e.g.:
computed: {
   toShowOrNotToShow: function () {
      if(this.$router.path === '/baseball' || this.$router.path === '/volleyball') return false;
      else
          return true;
    }
  }
  1. Just use it: <bottomBar v-if='toShowOrNotToShow' ></bottomBar>

Upvotes: 1

Related Questions