当我在vue js中单击div时如何隐藏特定的div答案

【问题标题】：how to hide specific div when i click div in vue js当我在vue js中单击div时如何隐藏特定的div
【发布时间】：2017-08-24 10:05:30
【问题描述】：

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

点击div时如何隐藏特定的div **当我这样做时，它们都被隐藏了**

【问题讨论】：

标签： javascript laravel vue.js vuejs2 vue-component

【解决方案1】：

我会这样做：

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

你可以在这里签到https://jsfiddle.net/do68kqje/3/

【讨论】：

我更新了它，所以你有一个“隐藏”数组，你可以开始推送你想要隐藏的元素的索引
是的，我做到了，但是这个包 npmjs.com/package/vue2-google-maps 它是与 vuejs2 一起使用的包装器

【解决方案2】：

暂时没有做Vue，所以这可能行不通，但应该是一个很好的指针。

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

【讨论】：

我从 api 获取这个数据并且没有显示文件我也在尝试：for (let i of this.items) { i.visible=true; }
@AslanMuhammad-Rza 在原始问题中没有投票时有点苛刻。

【解决方案3】：

如果您不想使用其他数组来保留隐藏索引（如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>

【讨论】：