[Vuejs]-Vue โ€“ Get id of particular clicked post

1๐Ÿ‘

โœ…

If I understood you correctly take a look at following snippet

const app = Vue.createApp({
  data: () => ({
    posts: [],
  }),
  async mounted() {
    await this.getPosts()
      this.posts = this.posts.map(p => {
        return {...p, numberOfClick: 0}
    })
  },
  methods : {
    async getPosts() {
      await fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => response.json())
        .then(json => this.posts = json)
    },
    getStat(id) {
      const post = this.posts.find(c => c.id === id)
      post.numberOfClick++
    },
  },
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div w="3" v-for="(post, i) in posts" :key="i">
    <div class="card-view" @click="getStat(post.id)">
      <div class="container">
        <h5 class="tag_name blue">{{ post.title }}</h5>
        <div class="company">{{ post.body }}</div>
        <h3>{{ post.numberOfClick }}</h3>
      </div>
    </div>
  </div>
</div>

Leave a comment