推動數據使用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

回答

相關問題