我有一个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>