[英]When you click on the button, the action is not the one that I want
我有问题,我听不懂。 我要做的任务是,有一个列表,其中包含所有块,所有信息均由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>
每个帖子的v-if
中都会使用show
属性来确定是否显示相关文本。 因此,每当您单击按钮以显示其中一个帖子时,都会影响所有帖子。
如果您只想显示一个帖子的文本,那么一个简单的解决方案是将show
data属性更改为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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.