はPOST

Question

TLを使用して、異なるコンポーネント内のオブジェクトへのデータをプッシュ; DRは、私は即座に提出した記事を表示する代わりに、WordpressのREST APIを使用して、私のページ

をリフレッシュするので、私はすべての問題なく、新しいポストを作成することができています。投稿が更新されるとすぐに投稿が表示されるので、投稿を作成するとすぐにHello.vueファイルのpostsオブジェクトを更新して、最新の投稿を表示する必要はありません。

私はこれまで行ってきたすべての実験を削除しました。（CreateでPostをインポートし、小道具を定義し、配列にプッシュし、公式Vueでオブジェクトの反応性について読むドキュメンテーション、何も役に立たなかった）。マイApp.js

はHello.vueとCreate.vue成分を表示Createと呼ばれるコンポーネントを示す<router>オブジェクトから成ります。

マイ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ファイルこれは私のアプリは、現在のように見えますです投稿：

<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> 

ご協力いただければ幸いです！

Answer 1

私はイベントバスを使用して、wotexのように終了しました。まず、私は以下のコードでbus.jsと呼ばれるファイルcreateadました：

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

次を使用して、両方の.vueのレイアウトにインポートbus.js：

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

は今できるだけ早くイベントを発します新しい投稿が作成されます（これはCreate.vueファイル内の私axios POSTリクエストに座っている）：

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

そして、イベントがもう一方の端（私のHello.vueファイル）に起こった場合、最終的に確認してください。

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

私に正しい方向を指摘してくれてありがとう！