推动数据使用POST

TL在不同的组件对象; DR我想表明瞬间，而不必刷新我的网页推动数据使用POST

使用WordPress的REST API，我能够没有任何问题，创建一个新的岗位提交帖子。该页面在页面刷新后立即显示，所以我想要做的就是在创建该文章后立即更新我的Hello.vue文件中的posts对象，因此我无需刷新即可显示我的最新帖子。

我不太确定从哪里开始 - 我已经删除了迄今为止所做的所有实验（导入Post in Create，定义道具，推送到数组，读取有关官方Vue的对象反应性文档，没有什么帮助）。

我的App.js由显示Hello.vue的<router>对象和显示Create.vue组件的名为Create的组件组成。这是我的应用程序现在看起来像：

我App.vue文件：

<template> 
    <div id="app"> 
    <section class="posts"> 
     <router-view></router-view> 
     <create></create> 
    </section> 
    </div> 
</template> 

<script> 
import Create from '@/components/Create.vue' 

export default { 
    name: 'app', 
    components: { 
    Create 
    } 
} 
</script> 

<style lang="scss"> 
@import '../src/assets/styles/style.scss' 
</style>

我Hello.vue它显示所有的帖子：

<template> 
    <div> 
    <section class="posts__Feed"> 
     <ul class="posts__List"> 
     <post v-for="item in posts" :item="item" :key="item.id"></post> 
     </ul> 
    </section> 
    </div> 
</template> 

<script> 
var postsUrl = '/wp-json/wp/v2/posts/' 
import Post from '@/components/Post.vue' 

export default { 
    name: 'hello', 
    props: ['responseData'], 
    components: { 
    Post 
    }, 
    data() { 
    return { 
     posts: [] 
    } 
    }, 
    beforeCreate() { 
    this.$http.get(postsUrl).then((response) => { 
     this.posts = response.data 
    }) 
    } 
} 
</script>

最后，Create.vue文件，该文件创建post：

<template> 
    <div> 
    <section class="posts__Create"> 
     <form class="posts__CreateForm" v-on:submit="createPosts"> 
     <div class="posts__CreateFormWrapper" v-bind:class="{ 'is-Loading': loading }"> 
      <p> 
      <input v-model="formInfo.title" type="text" name="title" id="title" placeholder="Name" :disabled="formSent"> 
      </p> 
      <p> 
      <textarea v-model="formInfo.content" name="content" id="content" cols="20" rows="10" maxlength="140" placeholder="Message" :disabled="formSent"></textarea> 
      </p> 
      <p> 
      <button :disabled="formSent">Send</button> 
      </p> 
     </div> 
     </form> 
    </section> 
    </div> 
</template> 

<script> 
var postsUrl = '/wp-json/wp/v2/posts/' 

export default { 
    name: 'create', 
    data() { 
    return { 
     formInfo: [], 
     responseData: [], 
     loading: false, 
     formSent: false 
    } 
    }, 
    methods: { 
    createPosts (e) { 
     e.preventDefault() 
     var info = this.formInfo 

     // Check if fields are empty 
     if (this.formInfo.title && this.formInfo.content) { 
     this.loading = true 

     // POST 
     this.$http.post(postsUrl, info).then((response) => { 
      this.formSent = true 
      this.loading = false 

      // get body data 
      this.responseData = response.data 
     }) 
     } 
    } // EOF createPosts 
    } 
} 
</script>

任何帮助将不胜感激！

来源

2017-03-24 twenty

你能澄清这个问题吗？ – wostex

问题是我不知道如何将postResult（Create.vue）的内容推送到帖子（Hello.vue）。 – twenty

你可以使用[事件总线]（https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication）在组件之间进行通信。 Create.vue在任务完成时发出事件，而Hello.vue侦听此事件并以某种方式作出反应。 – wostex

我结束了使用wotex建议的事件总线。只要

import { EventBus } from '@/bus.js'

现在发出的事件：首先，我createad调用下面的代码bus.js文件：使用

import Vue from 'vue' 
export const EventBus = new Vue()

接下来，进口bus.js既.vue布局一个新的职位创建（这是坐在Create.vue文件里面我爱可信POST请求）：

EventBus.$emit('newPost', this.responseData)

最后，检查事件发生在另一端（我Hello.vue文件）：

EventBus.$on('newPost', function (postData) {

感谢您指点我正确的方向！

来源

2017-03-26 14:10:01 twenty

推动数据使用POST

回答

相关问题