Question

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

传递道具的组件：

.WithOrigins("*")

接收道具的组件：

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

Answer 1

您需要将道具放入默认的出口内。同样，您也无法使用相同名称的道具和数据。

这就是你可以做的

export default {
    props: ['username'],

    data() {
      return {
         show: true
     }      
  }

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

Answer 2

您有多个username：

1。username迭代participants道具。

username

data变量

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

您需要删除第二个。这样您的数据将变成这样：

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

也尝试向您的key元素添加一个user道具。要求在最新版本的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道具传递到子组件中？

2 个答案: