Hiding a pargraph using v-if through vuex but containing that in a specific tab

问题

I have an array in My store which i am looping through to get a list which will be their own pages and share a same paragraph. I have a button which hides the paragraph. How do i make it so that it hides only on the first page and not on the other pages? So the way it should work is that if hide the paragraph in the Apple page, it should still appear on the other four pages.Or for the matter, if i hide the paragraph on any of the pages, it should not affect on any other page. Thank You

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    show:true,
    specialTypes:[
      {
    name: "Apple",
    Id:1
  },
  {
    name: "Banana",
    Id:2
  },
  {
    name: "Berries",
    Id:3
  },
  {
    name: "Mango",
    Id:4
  },
  {
    name: "Oranges",
    Id:5
  }
    ]
  },
  mutations: {
   toggle : state => {
     state.show = !state.show
   }
  },
  actions: {

  }
})


 My app.vue file looks like this

    <template>
  <div>
    <ul >
      <li v-for="specialType in $store.state.specialTypes" 
:key="specialType.specialTypeId"  @click="setActiveType(specialType)" 
:class="{'active': activeType === specialType}">
        <a><span>{{ specialType.name }}</span></a>
      </li>
    </ul>
    <router-view/>
    <Home></Home>
    <About></About>
  </div>
 </template>

 <script>
import Home from "./views/Home"
 import About from "./views/About"

 export default {
  components:{
   Home,
   About
  },
  data(){
    return{
    activeType:""
    }
  },
  methods:{
    setActiveType(type) {
     this.activeType = type
   }
 }
 }
 </script>

This is the paragraph which is shared by each tab.

<template>
<p v-if="$store.state.show">This needs to disappear</p>
</template>

<script>
import {mapMutations} from "vuex"

export default {
  data(){
    return{

    }
  },
 methods : {
   ...mapMutations ([
     "toggle"
   ])
 }
}
 </script>


The button is on this file

<template>
  <div>
    <button @click="toggle">Click Me</button>
  </div>
</template>


<script>
import {mapMutations} from "vuex"

export default {
 methods : {
   ...mapMutations ([
    "toggle"
   ])
     }
   }
</script>

回答1:

You could try the following condition v-if="specialType.Id!=1 || $store.state.show" the page that contains Apple which Id=1 it will be hidden :

  <li v-for="specialType in $store.state.specialTypes" 
     :key="specialType.specialTypeId"  @click="setActiveType(specialType)" 
       :class="{'active': activeType === specialType}" >
    <a v-if="$route.name === 'apple'  || specialType.Id!=1 || $store.state.show"><span>{{ specialType.name }}</span></a>
  </li>

回答2:

In your code, you are comparing objects here.

:class="{'active': activeType === specialType}"

Javascript doesn't work like this.

Replace above line with.

:class="{'active': activeType.Id === specialType.Id}"

Example: var jangoFett = { occupation: "Bounty Hunter", genetics: "superb" };

var bobaFett = { occupation: "Bounty Hunter", genetics: "superb" };

console.log(bobaFett === jangoFett); // Outputs: false

The properties of bobaFett and jangoFett are identical, yet the objects themselves aren't considered equal.

I hope that helps.

来源：https://stackoverflow.com/questions/54313902/hiding-a-pargraph-using-v-if-through-vuex-but-containing-that-in-a-specific-tab