子组件道具的计算属性 [英] Computed property on child component props
问题描述
我有这样的设置，我有子组件道具，里面有日期时间格式，我想在我的表中将其更改为更易读的格式，所以我使用 moment js 来更改格式并执行这些类型对于任务，如果我使用计算属性会更有意义.在我的 index.vue 中像这样
<div class="page-content"><div class="content-wrapper"><数据查看器 :source="source" :thead="thead"><模板范围=道具"><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}}//用于测试目的以查看返回值</td><td>{{publishDate}}</td>//这是我把我的计算更改为created_at格式的地方</tr></模板></数据查看器><script type="text/javascript">从'../../components/dataviewer.vue'导入DataViewer从时刻"导入时刻导出默认{成分:{数据查看器},数据(){返回{来源:'/api/article',头:[{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}],}},计算:{发布日期:函数(){return moment(props.item.created_at).format('YYYY-MM-DD')}}}
这是我的数据查看器文件中的内容
<table class="table"><thead class="bg-primary"><tr><th v-for="item in thead"><span>{{item.title}}</span></th></tr></thead><slot v-for="item in model.data" :item="item"></slot></tbody></模板><脚本>从'vue'导入Vue从 'axios' 导入 axios导出默认{道具:['来源'，'thead']，数据() {返回 {模型: {数据: []},}},beforeMount() {this.fetchData()},方法: {取数据(){var vm = 这个axios.get(this.source).then(功能(响应){Vue.set(vm.$data, 'model', response.data.model)}).catch(函数(错误){控制台日志(错误)})}}}但它不起作用，它找不到 props.item.created_at，所以我如何更改 created_at 或任何其他属性项以从中更改我的 index.vue?
解决方案 好像在使用 过滤器将在这里工作:
而不是使用计算道具:
过滤器:{发布日期:函数(值){return moment(value).format('YYYY-MM-DD')}}
代替{{publishDate}}
{{props.item.created_at |发布日期}}</td>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?
解决方案 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>
这篇关于子组件道具的计算属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆