When you click on the button, the action is not the one that I want

Question

I have a problem, I can not understand. I do a task, which is that there is a list of which consists of blocks, all information is taken by API, in each block there is a title body and a button to change. When you click on the change button, a text field should appear with a value inside the title, in the block in which you pressed the button. At the moment, when I click on the change button, I have fields for all blocks, how to make the text field open only near a certain block. I understand that I need to register an identifier for the "change" button, but something is not working out for me.

    <template>
  <div id="app">
    <input type="text" v-model="createTitle" />
    <input type="text" v-model="createBody" />
    <button  @click="addPost()">AddPost</button>
    <ul>
      <li v-for="(post, index) of posts">
        <p>{{ post.title }}</p>
        <p>{{ post.body }}</p>
        <button  @click="deleteData(index, post.id)">Delete</button>
        <button v-on:click="show =! show">
          Изменить
      </button>
      <transition v-if="show">
        <p><input  :value="post.title"></p>

      </transition>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'app',
  data () {

    return{
      posts: [],
      createTitle: '',
      createBody: '',
      show: false
    }
  },

    created(){
      axios.get('http://jsonplaceholder.typicode.com/posts').then(response => {
        this.posts = response.data
      })
    },
    methods: {
        deleteData(index, id) {
          axios.delete('http://jsonplaceholder.typicode.com/posts/' + id)
                    .then(response => {
                      console.log('delete')
                        this.posts.splice(index, 1);
                      })
                    .catch(function(error) {
                        console.log(error)
                    })
                  },
        addPost() {
          axios.post('http://jsonplaceholder.typicode.com/posts/', {
            title: this.createTitle,
            body: this.createBody
            }).then((response) => {
              this.posts.unshift(response.data)
              })
            },
        changePost(id, text) {
          axios.put('http://jsonplaceholder.typicode.com/posts/' + id, {
            text
          })
        }
      }
    }
</script>

Screnshot of app

Answer 1

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>