Скрытие парграфа с помощью v-if через vuex, но содержащее его в определенной вкладке - PullRequest
Новая
       9

Скрытие парграфа с помощью v-if через vuex, но содержащее его в определенной вкладке

0 голосов
/ 22 января 2019

У меня есть массив в Моем магазине, который я перебираю, чтобы получить список, который будет их собственными страницами и разделит тот же абзац. У меня есть кнопка, которая скрывает абзац. Как сделать так, чтобы он скрывался только на первой странице, а не на других? Таким образом, он должен работать так, что если скрыть абзац на странице 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>

Ответы [ 2 ]

0 голосов
/ 22 января 2019

В вашем коде вы сравниваете объекты здесь. 

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

Javascript не работает так.

Замените вышеуказанную строку на. 

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

Пример: var jangoFett = {род занятий: "Охотник за головами", генетика: "превосходно"};

var bobaFett = {род занятий: "Охотник за головами", генетика: "превосходно"};

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

Свойства bobaFett и jangoFett идентичны, но сами объекты не считаются равными.

Надеюсь, это поможет.

0 голосов
/ 22 января 2019

Вы можете попробовать следующее условие v-if="specialType.Id!=1 || $store.state.show" страница, содержащая Apple, которая Id = 1 будет скрыта: 

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