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

There's a few ways to approach this depending on your needs.

Multiple Open

You can make each post it's own component, that way you can have show be tied to each individual post instead of all of them.

Vue.component('post', {
  template: '#post-template',
  props: {
    post: Object,
  },
  data() {
    return {
      show: false,
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show
    },
  },
})

Then you can have use it like this:

One Open

If you just want one open you can pass an id as a prop and show it based on that.

Vue.component('post', {
  template: '#post-template',
  props: {
    post: Object,
    selectedId: Number,
  },
  computed: {
    show() {
      return this.post.id === this.selectedId
    },
  },
})

Then you can do like