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>

上面的代码是这样的：

因此，他单击“编辑帖子”按钮，就可以编辑自己的帖子。提交后，我该如何将用户发回，以便他可以查看其更新的帖子？我以为我会尝试在axios .then（）

中添加类似this.$emit('editPostFormIsVis', false)的内容。

这是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 demo here

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

axios.put请求后如何发回父组件？

1 个答案: