单击按钮可获取阵列中的特定对象

Question

单击按钮时，我必须更新数组中的对象。但我无法选择我单击的对象。

这是我的git以便更好地阅读https://github.com/Azciop/BernamontSteven_P7_V2

代码：

data() {
return {
post: {
file: "",
content: "",
},
showModal: false,
showModifyPost: false,
user: {
firstname: "",
lastname: "",
_id: "",
},
};
},

这是获取功能

getAllPost() {
axios
.get('http://127.0.0.1:3000/api/post')
.then((response) => {
console.log("getPosts", response.data);
this.post = response.data;
}).catch(error => {
console.log(error);
})
},

这是更新后功能

updatePost(id) {
const formData = new FormData();
formData.append("image", this.post[1].file);
formData.append("content", this.post[1].content);
axios.put('http://127.0.0.1:3000/api/post/' + id, formData,
{
headers: {
Authorization: "Bearer " + localStorage.getItem("token"),
'Content-Type': 'application/json',
},
})
.then(response => {
console.log(response);
location.reload("/accueil");
}).catch(e => {
console.log(e);
}
)
},

这是带有v-for的html显示和修改部分

<div class="post" :key="post._id" v-for="post in post">
<!-- update a post -->
<button @click="showModifyPost = true" v-if="post.userId == user._id  || user.isAdmin == true"
class="button button-modify-post">Modifier</button>
<transition name="fade" appear>
<div class="modal-overlay" v-if="showModifyPost" @click="showModifyPost = false"></div>
</transition>
<transition name="slide" appear>
<div class="modifiyPostModal" v-if="showModifyPost">
<span>
<h2 class="center-text">Modifier votre publication</h2>
<div class="close-post_button" @click="showModifyPost = false">
<font-awesome-icon class="close_create_post" icon="fa-solid fa-circle-xmark" />
</div>
</span>
<form enctype="multipart/form-data">
<div>
<input class="textPost" name="createPost" placeholder="Quoi de neuf ?"
v-model="post.content" />
</div>
<div class="center-sendbutton">
<input type="file" class="publishPost" id="changePicture" v-on:change="selectFile" ref="file" />
<button type="submit" v-on:click.prevent="updatePost(post._id)" class="publishPost">Modifier</button>
</div>
</form>
</div>
</transition>

这是创建功能

selectFile() {
this.posts.file = this.$refs.file.files[0];
},
// create post 
async submitCreatePost() {
const formData = new FormData();
formData.append('image', this.posts.file);
formData.append('content', this.posts.content);
formData.append('firstname', localStorage.getItem("firstname"));
formData.append('lastname', localStorage.getItem("lastname"));
formData.append('userId', localStorage.getItem("userId"));
await axios.post("http://127.0.0.1:3000/api/post",
formData,
{
headers: {
Authorization: "Bearer " + localStorage.getItem("token"),
}
}).then(
console.log(formData),
this.content = "",
this.file = "",
).then((response) => response.status >= 200 || response.status <= 201 ? 
location.reload(true) : console.log(response.statusText))
.catch(error => console.log(error));
},

但当我更新它时，它确实更新了对象1(因为它是在js函数中选择的(

我想知道如何选择我点击的对象。感谢

Answer 1

你能试试这个吗

export default {
created(){
this.getAllPost()
},
data(){
return{
posts: [],
post: {
file: "",
content: "",
},
showModal: false,
showModifyPost: false,
user: {
firstname: "",
lastname: "",
_id: "",
},
}
},
methods:{
getAllPost() {
axios
.get('http://127.0.0.1:3000/api/post')
.then((response) => {
console.log("getPosts", response.data);
this.posts = response.data;
}).catch(error => {
console.log(error);
})
},
updatePost(id) {
//the find part
const postToBeFound=this.posts.find((post)=>post._id===id)
console.log(postToBeFound)
const formData = new FormData();
formData.append("image", postToBeFound.file);
formData.append("content", postToBeFound.content);
axios.put('http://127.0.0.1:3000/api/post/' + id, formData,
{
headers: {
Authorization: "Bearer " + localStorage.getItem("token"),
'Content-Type': 'application/json',
},
})
.then(response => {
console.log(response);
location.reload("/accueil");
}).catch(e => {
console.log(e);
}
)
}
}

}

发生错误

formData.append("image", this.post[1].file);
formData.append("content", this.post[1].content);

由于post是一个对象，post[1]将给出错误。在我最初的回答中，我也修复了

formData.append("image", postToBeFound.file);
formData.append("content", postToBeFound.content);

Answer 2

找到了一种方法，不知道它是否正确，但它确实有效…

当我点击修改按钮时，我将当前帖子的id存储在本地存储中，然后我就这样做了。

updatePost() {
const thisPostId = localStorage.getItem("ThisPostId")
let formData = new FormData();
formData.append("image", this.post.file);
formData.append("content", this.post.content);
axios.put('http://127.0.0.1:3000/api/post/' + thisPostId, formData,
{
headers: {
Authorization: "Bearer " + localStorage.getItem("token"),
"Content-Type": "multipart/form-data",
},
})
.then(response => {
this.posts = response.data;
this.getAllPost();
this.showModifyPost = false
}).catch(e => {
console.log(e);
}
)
},