Vue.js 无法更改其他钩子和方法中的数据

Question

我正在用烧瓶 vue 开发 vlog 服务。 在 vue 的两个组件——PostList 和 PostDetail vue——之间，我使用 Eventbus 发送 postId。 PostList 发送 postId 和 PostDetail 接收它。然后我使用 axios 和 postId 向服务器请求 GET 方法。我改变了像'this.sth = result.data'这样的数据，但它没有改变

这是我的代码，除了 css 后列表

<template>
<div class="list-container">
  <div class="post-list" v-for="post in posts" v-bind:key="post.key" >
    <img :src="`http://54.180.79.49/${post.image}`" class="post-img">
    <div class="post-container" >
      <div class="post-title" v-on:click="redirect(post.post_id)"><p class="text-title">{{ post.title }}</p></div>
      <div class="content-container">
        <p class="post-content">{{ post.content }}</p>
        <div class="meta-container">
          <p class="post-meta">{{ formatDate(post.creation_time) }}, {{ post.commentCount }}개</p>
          <div class="heart-container">
          <img src="../assets/heart.png" class="heart-img">
          <p class="heart-cnt">0</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'PostList',
  data () {
    return {
      posts: [],
      category: '',
      isAll: false
    }
  },
  created: function () {
    this.$EventBus.$on('category', (category) => {
      this.isAll = !this.isAll
      this.category = category
      if (this.isAll === false) {
        this.$http.get('/post', {params: {category: 'All'}}).then((result) => {
          this.posts = result.data
          console.log(result.data)
        }).catch(function (error) {
          console.log(error)
        })
      } else {
        console.log(this.category)
        this.$http.get('/post', {params: {category: this.category}}).then((result) => {
          this.posts = result.data
          console.log(result.data)
        }).catch(function (error) {
          console.log(error)
        })
      }
    })
    this.$http.get('/post', {params: {category: 'All'}}).then((result) => {
      this.posts = result.data
      console.log(result.data)
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods: {
    tmp: function () {
      console.log(1)
    },
    formatDate: function (date) {
      return moment(date, 'YYYY-MM-DD').format('YYYY-MM-DD')
    },
    redirect: function (id) {
      this.$router.push('/detail')
      this.$EventBus.$emit('post_id', id)
    }
  }
}
</script>

发布详情

<template>
  <div class="body-wrapper">
    <div class="profile-container">
      <div class="profile-wrapper">
        <img src="../assets/profile.png" class="small-profile">
        <div class="intro-wrapper">
          <p class="small-name">test</p>
          <p class="small-intro">test</p>
        </div>
      </div>
    </div>
    <div class="all-wrapper">
      <div class="title-container">
        <div class="title-wrapper">
          <div class="heart-wrapper">
            <img src="../assets/heart.png" class="big-heart">
            <div class="count">256</div>
          </div>
          <div class="title"><p>{{ this.info.title }}</p></div>
        </div>
      </div>
      <div class="wrapper-wrapper">
        <div class="meta-wrapper">
          <div class="date"><p>{{ this.info.creation_time }}</p></div>
          <div class="category"><p>{{ this.info.category }}</p></div>
        </div>
      </div>
      <div class="detail-wrapper">
        <div class="detail-body">
          <!-- <img v-for="image in this.images" v-bind:key="image.key" :src="`http://54.180.79.49/${image}`" class="post-img"> -->
            <div class="post-content"><p>{{ this.info.content }}</p></div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'PostDetailBody',
  data () {
    return {
      info: {}
    }
  },
  created: function () {
    console.log(this.id)
    this.$EventBus.$on('post_id', (id) => {
      this.$http.get('/post/' + id).then((result) => {
        this.info = result.data
      }).catch(function (error) {
        console.log(error)
      })
    })
  }
}

Answer 1

我在这里看到了问题：

redirect: function (id) {
  this.$router.push('/detail')
  this.$EventBus.$emit('post_id', id)
}

和

  created: function () {
    console.log(this.id)
    this.$EventBus.$on('post_id', (id) => {
      this.$http.get('/post/' + id).then((result) => {
        this.info = result.data
      }).catch(function (error) {
        console.log(error)
      })
    })
  }

基本上，在您发出事件this.$EventBus.$emit('post_id', id) 时，尚未创建 PostDetail 组件。所以它@98​​7654324@ 没有注册。

一种可能的解决方案是在 url 中嵌入 id，并从路由器参数中读取帖子的 id

redirect: function (id) {
  this.$router.push('/detail/' + id)
}