Bind dynamically value to component's props

Question

I have defined custom component with props. when I using this component I need dynamically bind value to on of these props

In custom component's template I have defined element like this:

<template>
...
    <div class="input-group-addon" v-show="currency">{{ currency }}</div>
...
</template>

and its prop:

export default {
   ...
    props: {
      currency: {
        type: String
      }
    }
   ...
}

And component's usage in another component:

component's template

<custom-component currency="calculateCurrency" ></custom-component>

component's code

export default {
   components: {custom-component},
   data: () => ({
      myProject: null // this is used as v-model in combo box
   }),
   computed: {
      calculateCurrency: function() {
          return myProject.currency; // currency is getter in object myProject
      }
   }
}

so in result I have something like this:

I also tried use

suffix=calculateCurrency

without quotes but didn't help. can you help me fix it please? Thanks

Answer 1

I believe you are missing a colon on the binding property:

<custom-component :currency="calculateCurrency" ></custom-component>

Adding that before "currency" will allow for data-binding