Reputation: 2305
I just came upon Components section (One-way data flow) and I can't figure out how to show computed properties from them.
<div id="demo">
<input v-model="parentMsg"/>
<child v-bind:my-message="parentMsg"></child>
</div>
JS:
var Child = {
props: ['myMessage'],
template: '<span>{{ lowerCaseMsg }}</span>',
computed: {
lowerCaseMsg: function() {
return this.myMessage.trim().toLowerCase();
}
}
});
var data = {
parentMsg: 'Message'
}
var demo = new Vue({
el: '#demo',
data: data,
components: {
child: Child
}
})
Upvotes: 0
Views: 27
Reputation: 34306
You have a syntax error in your code:
var Child = {
props: ['myMessage'],
template: '<span>{{ lowerCaseMsg }}</span>',
computed: {
lowerCaseMsg: function() {
return this.myMessage.trim().toLowerCase();
}
}
}); // Extraneous )
Upvotes: 1