Question

TL; DR我想立即显示已提交的帖子，而不必刷新我的页面

使用Wordpress REST API我可以创建一个没有任何问题的新帖子。页面刷新后会立即显示该帖子，因此我想要创建该帖子后立即更新posts文件中的Hello.vue对象，因此我不需要刷新以显示我最新的帖子。

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

我的App.js由显示Hello.vue的<router>对象和显示Create组件的名为Create.vue的组件组成。这就是我的应用目前的样子：

我的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的文件：

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

接下来，使用以下命令将bus.js导入.vue两个布局：

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

现在在创建新帖子后立即发出事件（这位于Create.vue文件中的axios POST请求中）：

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

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

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

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

使用POST将数据推送到不同组件中的对象

1 个答案: