how to hide specific div when i click div in vue js

Question

<template>
 <div v-for="(item ,index) in items" v-if="showing">
                <span @click="showing=false">{{item.name}}</span>
 </div>
</template>
    <script>

            export default{
                       showing:true,
                       items: [
                          {'name':'a'},
                          {'name':'b'},
                          {'name':'c'},
                       ],
            }
    </script>

how to hide specific div when i click div ** when i do this way it`s all of them was hide**

ddiestra · Accepted Answer · 2017-03-30 13:25:05Z

4

I will do something like this:

<template>
   <div v-for="(item,index) in items" v-if="hide.indexOf(index) < 0">
     <span @click="hide.push(index)">{{item.name}}</span>
   </div>
</template>  
<script>
  export default{
    hide :[],
    items:[
     {'name':'a'},
     {'name':'b'},
     {'name':'c'}
    ]
  }
</script>

You can check in here https://jsfiddle.net/do68kqje/3/

answered Mar 30, 2017 at 13:25

ddiestra

1511 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ddiestra Over a year ago

I updated it so you have a "hide" array and you can start pushing the index of the element you want to hide

ddiestra Over a year ago

Yes I did, but this package npmjs.com/package/vue2-google-maps it is wrapper to work with vuejs2

Jono20201 · Accepted Answer · 2017-03-30 13:16:37Z

0

Not done Vue for a bit, so this may not work, but should be a good pointer.

<template>
    <div v-for="(item, index) in items" v-if="item.shown">
         <span @click="item.shown=false">{{item.name}}</span>
    </div>
</template>
<script>
        export default {
             items: [
                 {'name':'a', shown: true},
                 {'name':'b', shown: true},
                 {'name':'c', shown: true},
             ],
        }
</script>

answered Mar 30, 2017 at 13:16

Jono20201

3,2053 gold badges22 silver badges34 bronze badges

2 Comments

Aslan Mammadrzayev Over a year ago

i fetch this data from api and there is not shown filed i also trying : for (let i of this.items) { i.visible=true; }

Jono20201 Over a year ago

@AslanMuhammad-Rza Bit harsh to downvote when that wasn't in the original question.

Happyriri · Accepted Answer · 2017-03-30 14:16:54Z

0

If you don't want to use an other array to keep hide index (like hide :[]) :

new Vue({
    el: "#app",
      data: function() {
    return {
      items:[ {'name':'a'}, {'name':'b'}, {'name':'c'} ]
    }
  },
  methods: {
    setHide: function(item) {
      this.$set(item, 'hide', true);
    }
  }
});

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

<div id="app">
  <div v-for="item in items" :key="item" v-if="!item.hide">
    <span @click="setHide(item)">{{item.name}}</span>
  </div>
</div>

answered Mar 30, 2017 at 14:16

Happyriri

4,4532 gold badges20 silver badges30 bronze badges

Collectives™ on Stack Overflow

how to hide specific div when i click div in vue js

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related