子コンポーネントの小道具の計算プロパティ

Question

私は、この中に日時フォーマットを持つ子コンポーネント小道具を置いていますが、これを私のテーブルで人間が判読可能なフォーマットに変更したいので、瞬間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を使用してのように思える：代わりに計算された小道具を使用しての

：

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

を{{publishDate}}

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