>

v-for를 사용하는 동안 Vue 소품을 자식 구성 요소로 전달하면 자식 구성 요소가 페이지에 나타나지만 소품은 표시되지 않습니다. 브라우저 콘솔에 오류가 없습니다. 도움을 주시면 감사하겠습니다.

소품을 전달하는 구성 요소 :

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


  • 답변 # 1

    소품을 내보내기 기본값 안에 넣어야합니다. 또한 이름이 같은 소품과 데이터를 가질 수 없습니다.

    이것이 당신이 할 수있는 일입니다

    export default {
        props: ['username'],
        data() {
          return {
             show: true
         }      
      }
    
    

    첫 번째 구성 요소에 데이터 사용자 이름이 필요하지 않습니다. 참가자에 정의 된 경우 사용자 이름이 사용자에게 전달됩니다.

  • 답변 # 2

    당신은 여러 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}`"
    />
    
    

관련 자료

  • 이전 firebase - FutureBuilder에서 속성이 변경 될 때 어떻게 스위치를 "애니메이션"으로 만들 수 있습니까?
  • 다음 javascript - typescript에서 부작용을 가져올 수 없습니다