vue.js - 子组件 Prop 的计算属性

Question

我有这个设置，其中我有子组件 Prop ，里面有日期时间格式，我想在我的表中将它更改为更易于阅读的格式，所以我使用 moment js 来更改格式并执行这些操作如果我使用计算属性，任务会更有意义。在我的 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>

这是我的数据查看器文件中的内容

<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>

但它不会工作，它找不到 props.item.created_at，所以我如何更改 created_at 或任何其他要更改的属性项我的 index.vue？

Answer 1

似乎使用了 filter will work here :

而不是使用计算 Prop :

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

代替{{publishDate}}

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