Vue property isn't getting passed to child component-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

Try kebab case as @Nikola Pavicevic asked you to do, or try a v-bind="{ disableFooterText: true }".