Question

我有一个问题，我听不懂。我要做的任务是，有一个列表，其中包含所有块，所有信息均由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>

Screnshot of app

Answer 1

每个帖子的show中都将使用您的v-if属性来确定是否显示相关文本。因此，每当您单击按钮以显示其中一个帖子时，都会影响所有帖子。

如果您只想显示一个帖子的文本，一个简单的解决方案是将show数据属性更改为visiblePostID之类的内容。

然后，在按钮的单击处理程序中，您可以将该属性设置为相关帖子的ID：

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

然后更改v-if指令以仅在帖子的ID等于visiblePostID时显示相关文本：

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

当您单击该按钮时，该动作不是我想要的

1 个答案: