从 Vue.js 组件调用方法

Question

I'm newbie to Vue.js

I just want to call a method from a component:

var app = new Vue({
    el: '#app',
    components: {
        message: {
            props: ['createdat'],
            template: '
            <div>
              {{ postedOnA(createdat) }}
              {{ postedOnB(createdat) }}
            </div>',
        },
        methods: {
            postedOnA: function (createdat) {
                var date = new Date(createdat);
                return date.getHours() + ' ' + date.getMinutes();
            }
        }
    },
    methods: {
        postedOnB: function(createdat) {
            var date = new Date(createdat);
            return date.getHours() + ' ' + date.getMinutes();
        }
    }
})

I have also tried to call a component method, but that is not working too

Thanks

Answer 1

Create filters for formatting.

In your case:

var app = new Vue({
    el: '#app',
    components: {
        message: {
            props: ['createdat'],
            template: '
            <div>
              {{ createdat | formatdate }}
            </div>',
        }
    },
    filters: {
      formatdate: function (value) {
         var date = new Date(value);
         return date.getHours() + ' ' + date.getMinutes();
      }
    }
})

Read more here: https://v2.vuejs.org/v2/guide/filters.html