홈>
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
-
답변 # 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}`" />
관련 자료
- multithreading - 동일한 유형을 동시에 처리하지 못하도록 MutEx를 사용하는 동안 다중 스레드 목록 반복
- javascript - Linux 우분투에서 npm 명령을 사용하는 동안 npm 오류
- 문자열 벡터를 사용하는 동안 C ++의 세분화 오류
- c# - 비동기/대기 및 멀티 스레딩을 사용하는 동안 반응 형 UI 유지
- reactjs - 이벤트를 사용하지 않고 구성 요소의 속성을 가져 오는 방법
- vue.js - 하위 구성 요소에서 상위 데이터를 변경하는 방법은 무엇입니까?
- python - 파이프를 사용하는 동안 잘못된 MSE
- 입력을 위해 Python 생성기를 사용하는 동안 keras의 OOM 오류
- python - 및 조건과 함께 while 루프를 사용하여 두 값 사이에 숫자 입력
- reactjs - 자식/부모 구성 요소로 제어 양식 반응
- object - 상태 구성 요소를 사용하는 ReactJS 설정 값 정의되지 않음
- java - Spring Boot MiroService에서 Jackson API를 사용하는 동안 JSON 변환 오류
- sql - WORK의 데이터를 사용하는 동안 SAS EG ODBC 연결을 통해 SSMS를 쿼리하는 방법은 무엇입니까?
- python - while 루프를 사용하여 목록에서 선택한 값을 인쇄하는 방법
- swift - 애니메이션을 사용하여 이동하는 동안 요소의 오프셋 가져 오기
- javascript - 빌드 후 외부 Vue 구성 요소 사용
- javascript - react-router를 사용하여 새 탭에 단일 구성 요소를 표시하는 방법이 있습니까?
- reactjs - useReducer 상태를 자식 구성 요소에 전달하는 방법은 무엇입니까?
- c - 동적으로 할당 된 배열을 사용하는 동안 오류
- angular - 부모 구성 요소에서 비 특정 자식 구성 요소의 메서드를 어떻게 호출합니까?
소품을 내보내기 기본값 안에 넣어야합니다. 또한 이름이 같은 소품과 데이터를 가질 수 없습니다.
이것이 당신이 할 수있는 일입니다
첫 번째 구성 요소에 데이터 사용자 이름이 필요하지 않습니다. 참가자에 정의 된 경우 사용자 이름이 사용자에게 전달됩니다.