我有post.title和post.body的值,我需要在更改文本输入中的值后将其保存在数据中,以便以后可以使用这些新值供用户在菜单上写入(PUT请求) 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 @click="visiblePostID = post.id">
Изменить
</button>
<transition v-if="visiblePostID === post.id">
<p><input :value="post.title"><br><input :value="post.body">
<button type="button" @click="changePost(post.id,post.title,post.body)">Применить</button></p>
</transition>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'app',data() {
return {
posts: [],createTitle: '',createBody: '',visiblePostID: '',}
},changePost(id,title,body) {
axios.put('http://jsonplaceholder.typicode.com/posts/' + id,{
title: title,body: body
})
}
}
</script>
最佳答案
要添加到@Riddhi的答案中,您可以在带有临时变量的那些输入上使用v-model,以便在确认PUT请求成功之前不修改模型：
原文链接：https://www.f2er.com/js/531196.html// template
<transition v-if="visiblePostID === post.id">
<input v-model="tmpTitle" />
<input v-model="tmpBody" />
</transition>
// script
data() {
return {
tmpTitle: '',tmpBody: ''
}
}
>用一种方法(名为editPost())替换编辑按钮的处理程序,并将当前帖子的ID,标题和正文传递给该方法,这些信息将存储在上面声明的临时数据属性中：
// template
<button @click="editPost(post.id,post.body)">
Изменить
</button>
// script
methods: {
editPost(id,body) {
this.tmpTitle = title;
this.tmpBody = body;
this.visiblePostID = id;
}
}
>更新changePost()也可以获取当前帖子,一旦PUT请求成功,它将使用临时数据属性进行更新.
// template
<button type="button" @click="changePost(post,post.id,tmpTitle,tmpBody)">
Применить
</button>
// script
methods: {
async changePost(post,id,body) {
const { status } = await axios.put("https://jsonplaceholder.typicode.com/posts/" + id,{ title: title,body: body });
if (status === 200 /* HTTP OK */) {
post.title = title;
post.body = body;
}
}
}
