Vue.js return 来自 axios 的数据

Question

<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) }} 未定义。
我不知道如何 return 来自 axios
的数据请帮助我！！

Answer 1

对于稳定的运行代码，您的方法不应该是异步的。我的建议是下一个代码：

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

Vue.js return 来自 axios 的数据

Vue.js return data from axios

vue.js

axios

v-for