Vue.js не может изменить данные в других хуках и методах - PullRequest
Новая
       27

Vue.js не может изменить данные в других хуках и методах

0 голосов
/ 16 мая 2019

Я занимаюсь разработкой сервиса vlog с флягой, vue.Между двумя компонентами vue - PostList и PostDetail vue - я использую Eventbus для отправки postId.PostList отправляет postId, а PostDetail получает его.И тогда я запрашиваю метод GET для сервера, используя axios и postId.И я изменил данные как «this.sth = result.data», но он не изменился

вот мой код, кроме css postlist 

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

postdetail 

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

1 Ответ

0 голосов
/ 16 мая 2019

Я видел проблему здесь: 

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 еще не создан. Так что this.$EventBus.$on не зарегистрировано.

Одним из возможных решений является встроенный идентификатор в URL и чтение идентификатора записи из параметров маршрутизатора 

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