[Vuejs]-When you click on the button, the action is not the one that I want

by

0👍

✅

Your show property is being used in the v-if of every post to determine whether or not to display the associated text. So whenever you click the button to display one of the posts, it’s affecting all of the posts.

An easy solution, if you only ever want the text of one post to be displayed, would be to change the show data property to something like visiblePostID.

Then, in the button’s click handler, you can set that property to be the relevant post’s id:

<button @click="visiblePostID = post.id">...</button>

And then change the v-if directive to show the relevant text only if the post’s id equals the visiblePostID:

<transition v-if="visiblePostID === post.id">
  <p><input :value="post.title"></p>
</transition>

Leave a comment