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

Posted 2023-02-22

【中文标题】Vue.js 无法更改其他钩子和方法中的数据

【英文标题】：Vue.js cannot change data in other hook and methods

【发布时间】：2019-10-03 05:39:58

【问题描述】：

我正在用烧瓶 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)
      )
    )
  

【问题讨论】：

你需要一个minimal reproducible example。

【参考方案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)