CODEWITHSUNDEEP
vue.js
Nikola Stojaković
Nikola Stojaković

Reputation: 2305

Showing computed properties in components

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

Answers (1)

Decade Moon
Decade Moon

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

Related Questions