[英]Bind dynamically value to component's props
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
谢谢
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 在“ currency”之前添加它可以进行数据绑定
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.