자녀 구성 요소와 아버지 구성 요소가 있습니다.하위 구성요소에 잘못된 기본값을 가진 부울 소품이 있습니다.부모 컴포넌트의 component child를 호출하여 boolean 값을 반환하는 계산함수로 자녀 컴포넌트를 설정했을 때 오류가 발생하였습니다.자성분
<template>
<div v-if="fruitDisplay">
<span >{{ fruitName }}</span>
</div> </template>
<script>
export default {
name: "childComponent",
props: {
fruitDisplay: {
type: Boolean,
default: false
}
},
data() {
return {
fruitName: 'fruit selected !!!!'
}
} } </script>
<style scoped>
</style> 부모 성분
<template>
<div id="selector">
<div v-model="selected" v-for="(item, key) in fruitList" :value="key">
<child-component :fruitDisplay='getCoconut(item)'></child-component>
</div>
</div>
<br>
<br>
<span>Selected: {{ selected }}</span>
</div> </template>
<script>
export default {
name: "ParentComponent",
data() {
return {
selected: '',
fruitList: {
"fruit1": "Apple",
"fruit2": "Banana",
"fruit3": "Coconut"
}
}
},
computed: {
getCoconut(item) {
return item === 'Coconut'
}
} } </script>
<style scoped>
</style> 다음 오류가 발생하였습니다.TypeError: _vm.getCoconut은 브라우저 콘솔의 함수가 아니며 페이지가 표시되지 않습니다.이것이 문제입니다.
<child-component :fruitDisplay='getCoconut(item)'></child-component> 어떻게 하면 해결할 수 있을까요?
질문에 대한 답변
당신이 무엇을 달성하려고 하는지 잘 모르겠지만, 도울 수 있도록 노력하겠습니다.다음과 같은 경우 ‘Fruit selected(과일 선택됨)’를 표시하는 선택기를 만들고자 하는 것 같습니다.Coconut가 선택되었습니다.
계산된 속성에는 매개 변수를 전달할 수 없습니다.그러나 현재 선택한 과일을 가져다가 true 또는 false를 반환하는 방법을 사용할 수 있습니다.
커스텀 실렉터를 작성할 수도 있지만 질문에 대한 자세한 내용은 없습니다.그래서 여기 있는 전형적인 셀렉터를 사용했어요.
<div>Selected: {{ selected }}</div>
<select v-model="selected">
<option disabled>Please select one</option>
<option v-for="(item, key) in fruitList" :key="key" :value="item">
{{ item }}
</option> </select>
<FruitSelector :fruitdisplay="getCoconut()" /> 그리고 당신의 방법:
getCoconut() {
return this.selected === 'Coconut' }