I am new in vue js. I want to show hide elements on click. So that What I can do - make a property in data object like

isHidden: false

and add a mehtod like

showHide(){
return this.isHidden = !this.isHidden;
}

And bind the showHide method on click event like

<li @click="showHide">Some text</a>

But the problem is- if there are several list items binding the same click event, all lists will be shown on click, or all will hide. But I want the target element will only show or hide by click.

How can I do this, please?

CodePudding user response：

You can use some data to determine what element you want show/hide. For example: id, index of each element

<button v-for="(i, ind) in listElement" @click="toggleElement(ind)" :key="ind">
  Toggle {{ i }}
</button>

<p v-for="(i, ind) in listElementShow" :key="ind">
  Element: {{ i }}
</p>

Logic:

  data() {
    return {
      listElement: [ { name: 1, isShow: true}, { name: 2, isShow: true}],
    }
  },
  computed: {
    listElementShow() {
      return this.listElement.filter(e => e.isShow); 
    }
  }
  methods: {
    toggleElement(index) {
      this.listElement[index].isShow = !this.listElement[index].isShow;
    }
  }

CodePudding user response：

You can do something like this:

<template>
    <ul class="list-with-hidden-items">
        <li
            v-for="item in list"
            :key="item.id"
            @click="showHide(item.id)"
        >
            {{ item.text }}
        </li>
    </ul>
</template>

<script>
export default {
    data: () => ({
        hidden: {}
    }),
    methods: {
        showHide(id) {
            this.$set(this.hidden, id, !this.hidden[id]);
        }
    }
}
</script>

and then you can render where you want your item to be shown like this:

<div v-if="!this.hidden.item1">I am shown because of item1 is not hidden</div>

CodePudding user response：

You can use a dynamically bound classObject to do such a thing. See Class and Style Bindings

Sandbox

<template>
  <div @click="showHide()" :class="{ isHidden: isHidden }">
    <p>This is a thing</p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      isHidden: false,
    };
  },
  methods: {
    showHide() {
      this.isHidden = !this.isHidden;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.isHidden {
  background-color: grey;
}
div {
  background-color: #fff;
}
</style>

CodePudding user response：

To elaborate on some of these answers, you want to keep track of what's hidden and not hidden in your data object using a isHidden flag or similar.

Then when you loop through your object using v-for, conditionally set the isHidden property for the current item when it's clicked.

new Vue({
  el: "#app",
  data: {
    itemList: [{
        "id": 1,
        "text": "first item",
        "isHidden": false
      },
      {
        "id": 2,
        "text": "second item",
        "isHidden": true,

      },
      {
        "id": 3,
        "text": "third item",
        "isHidden": false,

      },
    ],
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="item in itemList" :key="item.id">
      <button @click="item.isHidden = !item.isHidden">
        <span v-if="item.isHidden">Show</span>
        <span v-else>Hide</span>
      </button>
      <span v-if="!item.isHidden">{{ item.text }}</span>
    </li>
  </ul>
</div>