Computed property on child component props

Question

I'm having this setup where I have child component props that have datetime format inside it and I want to change it to more human readable format in my table, so i use moment js to change the format and to do those kinds of task it will be made more sense if I use computed property. Like this in my index.vue

<div class="page-container">
    <div class="page-content">
        <div class="content-wrapper">
            <data-viewer :source="source" :thead="thead">
                <template scope="props">
                    <tr>
                        <td>{{props.item.name}}</td>
                        <td>{{props.item.creator}}</td>
                        <td>
                            <i class="icon-checkmark5" v-if="props.item.publish === '0'"></i>
                            <i class="icon-cancel-circle2" v-else></i> 
                            {{props.item.publish}} //for testing purpose to see returned value
                        </td>
                        <td>{{publishDate}}</td> //this is where i put my computed to change created_at format
                    </tr>
                </template>
            </data-viewer>
        </div>
    </div>
</div>

<script type="text/javascript">
import DataViewer from '../../components/dataviewer.vue'
import moment from 'moment'

export default{
    components:{
        DataViewer
    },
    data(){
        return{
            source: '/api/article',
            thead: [
                {title: 'Name', key: 'name', sort: true},
                {title: 'Creator', key: 'creator_id', sort: true},
                {title: 'Publish', key: 'publish', sort: true},
                {title: 'Created', key: 'created_at', sort: true}
            ],
        }
    },
    computed: {
        publishDate: function(){
           return moment(props.item.created_at).format('YYYY-MM-DD')
        }
    }
}
</script>

and here is what inside my dataviewer file

<template>
  <table class="table">
    <thead class="bg-primary">
        <tr>
            <th v-for="item in thead">
                <span>{{item.title}}</span>
            </th>
        </tr>
    </thead>
    <tbody>
        <slot v-for="item in model.data" :item="item"></slot>
    </tbody>
</table>
</template>

<script>
    import Vue from 'vue'
    import axios from 'axios'

    export default {
        props: ['source', 'thead'],
        data() {
            return {
                model: {
                    data: []
                },
            }
        },
        beforeMount() {
            this.fetchData()
        },
        methods: {
            fetchData() {
                var vm = this
                axios.get(this.source)
                    .then(function(response) {
                        Vue.set(vm.$data, 'model', response.data.model)

                    })
                    .catch(function(error) {
                        console.log(error)
                    })
            }
        }
    }
</script>

but it just won't work, it can't find props.item.created_at, so how I can change created_at or any other property item to change from my index.vue?

Answer 1

Seems like using a filter will work here:

Instead of using computed props:

filters: {
    publishDate: function(value){
       return moment(value).format('YYYY-MM-DD')
    }
}

In place of {{publishDate}}

<td>{{props.item.created_at | publishedDate }}</td>