Vue onclick显示特定项目

Question

我有一个关于Vue的问题。

我想将一个类添加到特定的项目中：

<p v-on:click="display = !display">Rediger joke</p>

Display之前为False，并将其改为true。

而且它是有效的。但我的问题是，这个onclick是在一个v-for循环中，我只想把"display“放在一个"update-site”上，而不是放在所有“update-site”上。我可以这样做吗?还是我必须尝试不同的设置？

非常感谢

Answer 1

我有个想法可能会对你有所帮助。其思想是您使用例如visible属性扩展post对象，当您click event触发时，您更改此属性并添加.display类。请检查此jsfiddle

模板

 <div id="app">
   <article v-for="post in filteredPosts" :key="post.id">
     {{post.name}}
     <button @click="display(post)">show</button>
     <div class="post-content" :class="{display: post.visible}">this is the part I want to display onclick</div>
     <hr />
   </article>
 </div>

css

.post-content {
  display: none;
}

.post-content.display {
  display: block;
}

代码

new Vue({
  el: '#app',
  data() {
    return {
      posts: []
    };
  },
  created() {
    //when you load posts. add visible property.
    setTimeout(() => {
      //posts from server
      var postsFromServer = [{
          id: 1,
          name: 'Post One'
        },
        {
          id: 2,
          name: 'Post Two'
        }
      ];

      //add visible proprty.
      this.posts = postsFromServer.map(post => {
        return {
          ...post,
          visible: false
        };
      });
    }, 1000);
  },
  computed: {
    filteredPosts() {
      //do your filters
      return this.posts;
    }
  },
  methods: {
    display(post) {
      this.$set(post, 'visible', !post.visible);
    }
  }
});

Answer 2

我有一篇文章，我从Firebase获取数据。

<article v-for="post in filteredPosts" :key="post.id">
{{post.name}}
<p v-on:click="display = !display"></p>
<div>this is the part I want to display onclick</div
</article>

updateInputs有display:none，但onclick我希望它显示为block：

.updateInputs.display {
      display: block;
      position: absolute;
      top:0;
      left:0;
      bottom: 0;
     background-color: white;
     box-shadow: 4px 4px 10px black;
     width: 100%;
     height: auto;
    overflow: hidden;
    overflow-y: scroll;
    padding-bottom: 10px;
    }