Блог

У меня проблема, я не могу понять. Я выполняю задачу, которая заключается в том, что есть список, состоящий из блоков, вся информация берется API, в каждом блоке есть тело заголовка и кнопка для изменения. При нажатии на кнопку изменить должно появиться текстовое поле со значением внутри заголовка, в блоке, в котором вы нажали кнопку. На данный момент, когда я нажимаю на кнопку изменить, у меня есть поля для всех блоков, как сделать, чтобы текстовое поле открывалось только возле определенного блока. Я понимаю, что мне нужно зарегистрировать идентификатор для кнопки «изменить», но у меня что-то не получается.

     <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>
  

Скриншот приложения

Ваше show свойство используется в v-if каждом сообщении, чтобы определить, отображать связанный текст или нет. Поэтому всякий раз, когда вы нажимаете кнопку для отображения одного из сообщений, это влияет на все сообщения.

Простым решением, если вы хотите, чтобы отображался текст только одного сообщения, было бы изменить show свойство data на что-то вроде visiblePostID .

Затем в обработчике нажатия кнопки вы можете установить это свойство в качестве идентификатора соответствующей записи:

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

А затем измените v-if директиву, чтобы показывать соответствующий текст, только если идентификатор записи равен visiblePostID :

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