通过 vuex 使用 v-if 隐藏段落，但将其包含在特定选项卡中 [英] Hiding a pargraph using v-if through vuex but containing that in a specific tab

问题描述

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

从'vue'导入Vue从 'vuex' 导入 VuexVue.use(Vuex)导出默认新 Vuex.Store({状态: {显示:真实，特殊类型:[{名称:苹果"，编号:1},{名称:香蕉"，编号:2},{名称:浆果"，编号:3},{名称:芒果"，编号:4},{名称:橙子"，编号:5}]},突变:{切换:状态=>{state.show = !state.show}},动作:{}})我的 app.vue 文件看起来像这样<模板><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><路由器视图/><首页></首页><关于></关于>

<脚本>从./views/Home"导入主页从./views/About"导入关于导出默认{组件:{家，关于},数据(){返回{活动类型:""}},方法:{setActiveType(类型){this.activeType = 类型}}}这是每个选项卡共享的段落.<模板><p v-if="$store.state.show">这需要消失</p><脚本>从vuex"导入 {mapMutations}导出默认{数据(){返回{}},方法 : {...mapMutations ([切换"])}}按钮在这个文件上<模板><div><button @click="toggle">点击我</button>

<脚本>从vuex"导入 {mapMutations}导出默认{方法 : {...mapMutations ([切换"])}}

解决方案

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

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

Javascript 不是这样工作的.

将上面的行替换为.

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

示例:var jangoFett = {职业:赏金猎人"，遗传学:精湛"};

var bobaFett = {职业:赏金猎人"，遗传学:精湛"};

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

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

希望能帮到你.

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>

解决方案

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.

这篇关于通过 vuex 使用 v-if 隐藏段落，但将其包含在特定选项卡中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！