It seems ridiculous that I can't get this to work, but when passing a prop to a child component, the value of the prop never actually changes and disableFooterText is always false. Am I doing something wrong?
Parent:
<MyChildComponent :disableFooterText="true">
Child:
<MyCustomDropdown :footerText="footerText">
props: {
disableFooterText: {
default: false,
type: Boolean
},
}
computed: {
footerText() {
if (this.disableFooterText) { // always false
return '';
}
return 'Lorem impsum'; // always returns this value
},
}
Try with kebab-case prop:
const app = Vue.createApp({})
app.component('my-child-component', {
template: `
<div>
<p>{{numResultsText}}</p>
</div>
`,
props: {
disableFooterText: {
type: Boolean,
default: false,
},
},
computed: {
numResultsText() {
if (this.disableFooterText) { // always false
return this.disableFooterText;
}
return 'Lorem impsum'; // always returns this value
},
},
})
app.mount('#demo')<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<my-child-component :disable-footer-text="true" />
</div>Try kebab case as @Nikola Pavicevic asked you to do, or try a v-bind="{ disableFooterText: true }".