通过 vuex 使用 v-if 隐藏段落，但在特定选项卡中包含该段落答案

【问题标题】：Hiding a pargraph using v-if through vuex but containing that in a specific tab通过 vuex 使用 v-if 隐藏段落，但在特定选项卡中包含该段落
【发布时间】：2019-01-22 17:53:44
【问题描述】：

我的商店中有一个数组，我正在循环获取一个列表，该列表将是他们自己的页面并共享相同的段落。我有一个隐藏段落的按钮。我如何使它只隐藏在第一页而不隐藏在其他页面上？所以它应该工作的方式是，如果隐藏Apple页面中的段落，它应该仍然出现在其他四个页面上。或者就此事而言，如果我隐藏任何页面上的段落，它不应该影响任何其他页面页。谢谢你

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>

【问题讨论】：

标签： vue.js vuex nuxt.js

【解决方案1】：

在您的代码中，您在此处比较对象。

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

Javascript 不能这样工作。

将上面的行替换为。

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

示例： var jangoFett = { 职业：“赏金猎人”，遗传学：“极好” };

var bobaFett = { 职业：“赏金猎人”，遗传学：“极好” };

console.log(bobaFett === jangoFett); // 输出：假

bobaFett 和 jangoFett 的属性相同，但对象本身并不相等。

希望对你有帮助。

【讨论】：