Vue отображение onclick c элемент

Question

• 1000 правда.

И работает. Но моя проблема в том, что этот onclick находится внутри v-for l oop, и я хочу разместить «display» только на одном «update-site», а не на всех. Могу ли я сделать это или мне нужно попробовать другую настройку?

Большое спасибо

Answer 1

У меня есть идея, которая может вам помочь. Идея состоит в том, что вы расширяете объект post, например, свойством visible, и когда вы запускаете 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 я хочу, чтобы он отображался как блок:

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