Как передать Vue реквизит в дочерний компонент при использовании v-for? - PullRequest
Новая
       145

Как передать Vue реквизит в дочерний компонент при использовании v-for?

0 голосов
/ 30 апреля 2020

При передаче реквизита Vue в дочерний компонент при использовании v-for дочерний компонент появляется на странице, но не отображает реквизит. В консоли браузера нет ошибок. Любая помощь будет принята с благодарностью.

Компонент, проходящий через реквизит: 

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

Ответы [ 2 ]

1 голос
/ 30 апреля 2020

У вас есть несколько username:

1. username при итерации participants проп.

username переменная в data

Кажется, что часть template пытается использовать вашу часть данных, которая является нулевой.

Вам необходимо удалить второй. Таким образом, ваши данные станут такими: 

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

Также попробуйте добавить key реквизит к вашему элементу user. Необходимо было использовать key в последней версии vue.

Так что ваш шаблон будет выглядеть так: 

<user 
        v-for="(username, index) in participants"
        v-bind:username="username"
        v-bind:index="index"
        v-bind:key="`user-${index}`"
/>
1 голос
/ 30 апреля 2020

Вы должны поместить реквизиты в экспорт по умолчанию. Также вы не можете иметь реквизит и данные с одинаковым именем.

Это то, что вы можете сделать 

export default {
    props: ['username'],

    data() {
      return {
         show: true
     }      
  }

Вам также не нужно имя пользователя данных в вашем первом компоненте, имя пользователя будет передано пользователю, если оно определено участниками

...