홈>2020-06-25 20:20

vue.js - v-for를 사용하는 동안 Vue 소품을 자식 구성 요소에 전달하는 방법은 무엇입니까?

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>

vue.js v-for prop

답변 # 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}`"
/>
```

Python2.net

vue.js - v-for를 사용하는 동안 Vue 소품을 자식 구성 요소에 전달하는 방법은 무엇입니까?

관련 자료