Как отправить обратно в родительский компонент после запроса axios.put?

Question

Пользователь может просмотреть свое сообщение (заголовок, сообщение и т. Д.) И отредактировать его, нажав кнопку «Редактировать сообщение».После того, как пользователь отредактирует свое сообщение (запрос http PUT выполнен), он должен вернуться к обновленному виду своего сообщения.

Моя проблема в том, что я не знаю, как вернуть его к просмотру его обновленного сообщения.

Позвольте мне показать ниже [ также демо приложения в прямом эфире здесь ]

Вот мой PostDetail.vue шаблон, который показывает детали его поста:

    <template>
  <div>
    <div v-if="!editPostFormIsVis">
      <ul>
        <li>ID: {{post.id}}</li>
        <li>Title: {{post.title}}</li>
        <li>Body: {{post.body}}</li>
        <li>userId: {{post.userId}}</li>
      </ul>
      <button @click="editPost">Edit this Post</button>
    </div>
    <div v-if="editPostFormIsVis">
      <h3>Update this Post</h3>
      <EditPost v-bind:post="post"/>
      <button @click="cancelEdit">Cancel Edit</button>
    </div>
  </div>
</template>

import axios from "axios";
import EditPost from "@/components/EditPost.vue";
export default {
  components: {
    EditPost
  },
  data() {
    return {
      post: {},
      editPostFormIsVis: false
    };
  },
  created() {
    axios
      .get(
        "https://jsonplaceholder.typicode.com/posts/" + this.$route.params.id
      )
      .then(resp => {
        this.post = resp.data;
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    editPost() {
      this.editPostFormIsVis = true;
    },
    cancelEdit() {
      this.editPostFormIsVis = false;
    }
  }
};
</script>

ЭтоВот как выглядит приведенный выше код:

Поэтому он нажимает кнопку «Редактировать сообщение» и может редактировать свое сообщение.После отправки, как я могу отправить пользователя обратно, чтобы он мог просмотреть его обновленное сообщение?Я подумал, что попробую добавить что-то вроде: this.$emit('editPostFormIsVis', false) в мои аксиозы .then ()

Вот шаблон EditPost.vue

<template>
  <div>
    <p>Post Id: {{post.id}}</p>
    <form @submit="editPost">
      <label for="titleInput">Title:</label>
      <br>
      <input type="text" id="titleInput" v-model="post.title" required>
      <br>
      <label for="bodyInput">Body:</label>
      <br>
      <textarea rows="3" v-model="post.body"></textarea>
      <br>
      <label for="assignSelect">Assign to:</label>
      <br>
      <select id="assignSelect">
        <option value="1">John</option>
        <option value="2">Sam</option>
        <option value="3">Mary</option>
      </select>
      <br>
      <br>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "PostForm",
  props: {
    post: {
      type: Object
    }
  },
  created() {},
  methods: {
    editPost(evt) {
      evt.preventDefault();
      axios
        .put("https://jsonplaceholder.typicode.com/posts/" + this.post.id)
        .then(response => {
          //dosomething
          console.log(response.status);
          this.$emit('editPostFormIsVis', false)
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

Демоверсии Codesandbox здесь

Answer 1

Один из способов сделать это может быть:

<EditPost v-bind:post="post" @saved="editPostFormIsVis = false" />

(или также v-on:saved="editPostFormIsVis = false", что является более длинным синтаксисом)

Директива @saved реагирует на «сохраненные» события, исходящие от вашего компонента, это может быть любое имя, которое вам нравится.

Итак, внутри вашего EditPost компонента вы должны сделать:

someFormSaveMethod() {
  // save stuff using a promise maybe
  .then(() => {
    // Emit a "saved" event.
    this.$emit('saved');
  });
}

Подробнее см. https://vuejs.org/v2/guide/components-custom-events.html