입력값 문제를 해결하려면 어떻게 해야 합니까?

입력값 문제를 해결하려면 어떻게 해야 합니까?

있습니다post.title그리고.post.body텍스트 입력의 값을 변경한 후 데이터에 저장해야 합니다.이것에 의해, 유저는 나중에 이러한 새로운 값을 사용해 쓸 수 있습니다).PUTAPI 상에서 요구)을 클릭합니다.어떻게 하면 좋을까요?

내 암호는 이거야

<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>

양방향 데이터 바인딩의 경우 다음을 사용해야 합니다.v-model여기서 읽어주세요.

<transition v-if="visiblePostID === post.id">
  <p>
    <input v-model="post.title">
    <br>
    <input v-model="post.body">

    <button type="button" @click="changePost(post.id, post.title, post.body)">Применить</button>
  </p>
</transition>

@Riddhi의 답변에 추가하려면v-model임시 변수가 있는 입력에 대해 모델을 수정하지 않도록 하기 위해PUT- 요청이 성공했음을 확인합니다.

1. 임시 데이터 속성을 추가하여<input>값을 지정합니다.

   // template
   <transition v-if="visiblePostID === post.id">
     <input v-model="tmpTitle" />
     <input v-model="tmpBody" />
   </transition>
   
   // script
   data() {
     return {
       tmpTitle: '',
       tmpBody: ''
     }
   }
   

2. 편집 버튼의 핸들러를 메서드(이름 지정)로 바꿉니다.editPost()현재 투고의 ID, 제목 및 본문으로 이동하여 위에서 선언한 임시 데이터 속성에 저장합니다.

   // template
   <button @click="editPost(post.id, post.title, post.body)">
     Изменить
   </button>
   
   // script
   methods: {
     editPost(id, title, body) {
       this.tmpTitle = title;
       this.tmpBody = body;
       this.visiblePostID = id;
     }
   }
   

3. 갱신하다changePost()물살을 타다post이 속성은 임시 데이터 속성으로 갱신됩니다.PUT요청이 성공했습니다.

   // template
   <button type="button" @click="changePost(post, post.id, tmpTitle, tmpBody)">
     Применить
   </button>
   
   // script
   methods: {
     async changePost(post, id, title, 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;
       }
     }
   }
   

데모

언급URL : https://stackoverflow.com/questions/55019001/how-do-i-get-rid-of-problem-with-values-in-input