未出现在道具中的方法的返回数据

Question

我无法将数据从方法传递给道具。该方法从Firestore的集合中获取一个字段。

这是父母的组合：

    <template>
          <post-card
            v-for="post in posts"
            :key="post.id"
            :userId="post.userId"
            :userName="userName(post.userId)"
          />
    </template>
    
    <script>
   components: {
      PostCard
}
    methods: {
         userName(id){
                this.$fire.firestore.collection('users').doc(id).get().then(snapshot => {
                  console.log("id", snapshot.data())
                  return snapshot.data().name
                })
              }
    }
    </script>

这是明信片的组合：

<template>
{{userName}}
</template>
<script>
name: 'post-card'.
    props: [
      'userName',
      'userId'
    ],
</script>

道具可以通过这种方式获取数据吗？一旦工作，这会是反应性的吗？

Answer 1

我无法访问您的特定Firestore数据，并且嘲笑它非常困难，因此我使用Jsonplaceholder来示例。

这是我将如何处理此类情况

index.vue

<template>
  <div>
    <post-card v-for="user in users" :key="user.id" :user="user" />
  </div>
</template>

<script>
export default {
  components: {
    'post-card': () => import('~/components/PostCard.vue'),
  },
  data() {
    return {
      users: [],
    }
  },
  async mounted() {
    this.users = await this.$axios.$get(
      'https://jsonplaceholder.typicode.com/users/'
    )
  },
  // methods: {
  //   async fetchUsername(id) {
  //     const snapshot = await this.$fire.firestore
  //       .collection('users')
  //       .doc(id)
  //       .get()
  //     console.log('id', snapshot.data())
  //     return snapshot.data().name
  //   },
  // },
}
</script>

pcardc.vue

<template>
  <div>
    <span>{{ user.name }}</span>
    <pre>{{ details }}</pre>
    <hr />
  </div>
</template>

<script>
export default {
  name: 'PostCard',
  props: {
    user: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      details: {},
    }
  },
  async mounted() {
    this.details = await this.$axios.$get(
      `https://jsonplaceholder.typicode.com/users/${this.user.id}`
    )
  },
}
</script>

在这里，我在这里使用this。基本上是一个花哨的axios + .data组合，没什么特别的。

---

我没有使用：用户名=“ username（post.userid）”在您时代，因为这本身不是可行的。在这种情况下，模板是同步的，这意味着在运行功能时，您将无法获得post.userid，因为请求仍在待处理。同时，您的孩子需要此信息才能使自己呈现。

在Vue中，通常您会在 Child 组件本身或安装挂钩中进行此类逻辑。这主要是因为vue子组件如何安装在此处所述： a>

您可能可以使用这种挂载的技巧，但我不建议以这种方式工作，因为它将是hacky hacky hacky ，总体而言，更加困难和不必要。