PostSelection.vue

<template>
  <section>
    <ul class="grid grid-cols-4 justify-center gap-2">
      <li v-for="(post, index) in posts"
          :key="post.code"
          :style="`background-image: url(${post.thumbnail})`"
          class="bg-cover w-full aspect-h-4 aspect-w-4 rounded-md">
        <input id="selectedPosts"
               v-model="selectedPosts"
               :title="post.code"
               :value="post.code"
               class="focus:ring-purple-500 text-purple-600 border-transparent rounded-md w-full h-full opacity-75 bg-transparent"
               name="selectedPosts"
               type="checkbox"
               @change="checkMaxLinks">
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  data () {
    return {
      posts: [],
      selectedPosts: [],
    };
  },
  
  methods: {
    checkMaxLinks () {
      this.$nextTick(() => {
        if (this.$store.maxLinks !== null && this.selectedPosts.length > this.$store.maxLinks) {
          alert(this.__(`You cannot select more than ${this.$store.maxLinks} posts.`));
          this.selectedPosts.pop();
        }
      });
    },
    
    setPosts (posts) {
      const allPosts = [...this.posts, ...posts];
      this.posts = [...new Set(allPosts)];
    },
  },
  
  mounted () {
    this.$bus.$on('UPDATE_POSTS', (media) => {
      this.selectedPosts = [];
      this.$store.selectedPosts = [];
      this.setPosts(media);
    });
  },
};
</script>