Question

我在VueJS中有方法并创建了属性

created() {
  axios.get('/wp-json/wp/v2/users/' + portal.user.id + '?context=edit', {headers: {'X-WP-Nonce': portal.nonce}})
  .then(response => {
    this.user = response.data;
  })
  .catch(e => {
    this.errors.push(e);
  });

  axios.get('/wp-json/wp/v2/categories')
  .then(response => {
    this.terms = response.data;
  })
  .catch(e => {
    this.errors.push(e);
  });
},

methods: {
  createPost: function() {

    let title = this.new_post_title;
    let content = this.new_post_content;
    let tags = this.new_post_tags;
    let status = this.status;

    let data = {
      'title': title, 
      'content': content, 
      'status': status,
    };

    axios.post("/wp-json/wp/v2/posts/", data, {headers: {'X-WP-Nonce': portal.nonce}})
    .then(response => {
      console.log(response);
    })
    .catch(e => {
      this.errors.push(e);
      console.log(this.errors);
    });

    this.new_post_title = '';
    this.new_post_content = '';
    this.new_post_tags = '';
  }
},

一切正在处理请求，数据正在发布到WordPress，当我刷新页面时，我会在页面顶部发布新帖子，就像它应该的那样。

但是如何在请求完成后让页面异步加载新帖子？

Answer 1

如果您的帖子成功创建，这意味着如果您向帖子端点发出get请求，您将获得新创建的帖子。就像你刷新页面一样。所以我的观点是在成功发布请求后，直接在客户端将新帖子插入页面。没有必要的请求。

我不知道您的组件层次结构，或者您是否正在使用Vuex。但是，从创建帖子的组件中，您将$emit包含新帖子数据的事件。

createPost: function() {

    let title = this.new_post_title;
    let content = this.new_post_content;
    let tags = this.new_post_tags;
    let status = this.status;

    let data = {
      'title': title, 
      'content': content, 
      'status': status,
    };

    axios.post("/wp-json/wp/v2/posts/", data, {headers: {'X-WP-Nonce': portal.nonce}})
    .then(response => {
      console.log(response);
      this.$emit('new-post',data)
    })
    .catch(e => {
      this.errors.push(e);
      console.log(this.errors);
    });

    this.new_post_title = '';
    this.new_post_content = '';
    this.new_post_tags = '';
  }

此组件的父级将捕获包含数据的事件。继续发出事件或传递道具，直到到达显示列表的组件。进入列表组件后，将新帖子推送到posts数组中，它将显示在页面上。

与VueJS和Axios的异步发布

1 个答案: