Vue. js возврат данных из axios - PullRequest
Новая
       26

Vue. js возврат данных из axios

0 голосов
/ 26 февраля 2020 
<template>
  <div class="comment">
    <div v-for="(comment, index) in comments" :key="index">
      {{ getUser(comment.student_idx) }}
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import server from '@/models/server'
export default {
  data() {
    return {
      url: server,
      comments: {}
    }
  },
  props: ['idx'],
  created() {
    axios.get(`${this.url}/bamboo/reply?post=${this.idx}`)
    .then(response => {
      if (response.data.status === 200) {
        this.comments = response.data.data.replies
      }
    })
  },
  methods: {
    getUser (idx) {
      axios.get(`${this.url}/member/student/${idx}`)
      .then(response => {
        if (response.data.status === 200) {
          return response.data.data.member.name
        }
      })
    }
  }
}
</script>

Я хотел бы загрузить комментарии в created и распечатать их, используя v-for.

В v-for я хотел бы загрузить member.name из каждого комментария

Но {{ getUser(comment.student_idx) }} не определено.
Я не знаю, как вернуть данные с топора ios
Помогите мне, пожалуйста !!

1 Ответ

1 голос
/ 26 февраля 2020

Ваш метод не должен быть asyn c для стабильного кода выполнения. Я рекомендую следующий код: 

<template>
  <div class="comment">
    <div v-for="(comment, index) in comments" :key="index">
      {{ comments['user'] }}
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import server from '@/models/server'
export default {
  data() {
    return {
      url: server,
      comments: []
    }
  },
  props: ['idx'],
  created() {
    axios.get(`${this.url}/bamboo/reply?post=${this.idx}`)
    .then(response => {
      if (response.data.status === 200) {
        this.comments = response.data.data.replies;
        if(this.comments)
          for(let comment of this.comments){
            this.getUser(comment, comment.student_idx);
          }
      }
    })
  },
  methods: {
    getUser (comment, idx) {
      axios.get(`${this.url}/member/student/${idx}`)
      .then(response => {
        if (response.data.status === 200) {
          this.$set(comment, 'user', response.data.data.member.name);
        }
      })
    }
  }
}
</script>
...