如何在使用 v-for 时将 Vue 道具传递给子组件？

Question

当使用 v-for 将 Vue prop 传递给子组件时，子组件出现在页面上但不显示 prop。浏览器控制台中没有错误。任何帮助将不胜感激。

传递 prop 的组件：

<template>
    <div class="col" ref="participants-window">

    <div>
        <user 
        v-for="(username, index) in participants"
        v-bind:username="username"
        v-bind:index="index"
        > </user>
    </div>     
    </div>
</template>

<script>
export default {
    props: ['participants'],

    data() {
      return {
         show: true,
         username: null
     }      
},

    mounted() {
    this.scrollToBottom();
},

watch: {
    messages() {
        this.scrollToBottom();
    }
},

methods: {
    scrollToBottom() {
        this.$nextTick(() => {
            this.$refs['participants-window'].scrollTop = this.$refs['participants-window'].scrollHeight;
        });
    }
},
} 

</script>

<style scoped>

.col {
    overflow-y: auto;
    max-height: 200px;
    word-wrap: break-word;
}
</style>

接收道具的组件：

<template>
  <div class="text-center">
  <b-button id="tooltip-button-2" variant="primary">{{ username }}</b-button>
  <b-tooltip show target="tooltip-button-2">tooltip</b-tooltip>
  </div>
</template>
<script>

 props: ['username']

  export default {
    data() {
      return {
         show: true,
         username: null
     }      
  }
}
</script>

Answer 1

您需要将道具放入导出默认值中。此外，您不能拥有同名的道具和数据。

这就是你能做的

export default {
    props: ['username'],

    data() {
      return {
         show: true
     }      
  }

您也不需要第一个组件中的数据用户名，如果在参与者中定义，用户名将传递给用户

Answer 2

您有多个 username:

1.username 在迭代 participants prop.

username data

似乎 template 部分正在尝试使用您的数据部分，该部分为空。

您需要删除第二个。所以你的数据会变成这样：

export default {
    data() {
      return {
         show: true,
     }      
}

也尝试向您的 user 元素添加一个 key 属性。已要求在最新版本的vue中使用key。

因此您的模板如下所示：

<user 
        v-for="(username, index) in participants"
        v-bind:username="username"
        v-bind:index="index"
        v-bind:key="`user-${index}`"
/>

如何在使用 v-for 时将 Vue 道具传递给子组件？

How to pass a Vue prop into a child component while using v-for?

prop

vue.js

v-for