Vue.js v-show in a list

Question

I\'m sure this one\'s gonna be extremely easy for you guys. I am trying to make a simple list of posts with the post titles always visible, and when you click a specific pos

Answer 1

I cheated in a different way. Just added a show property to each post and toggled that.

new Vue({
  el: 'body',
  data: {
    list: []
  },
  ready: function() {
    this.fetchPostList()
  },
  methods: {
    fetchPostList: function() {
      setTimeout(function() {
        this.list.push({
          title: 'First Post',
          body: 'This is the first Post',
          userId: 'Joe',
          show: false
        });
        this.list.push({
          title: 'Second Post',
          body: 'This is the second Post',
          userId: 'Joe',
          show: false
        });
        this.list.push({
          title: 'Third Post',
          body: 'This is the third Post',
          userId: 'Joe',
          show: false
        });
      }.bind(this), 2000);
    },
    changeShow: function(idx) {
      this.list[idx].show = !this.list[idx].show;
    }
  }
});

  
My Posts
  

    

      

        
{{ post.title }}
        
{{ post.body }}
        ID: {{ post.userId }}