我目前正在学校里做我的顶峰项目。目前,我正在为csr使用nuxt,vue,vuex和vuetify,为ssr使用express。 在我的代码中,我想从v-for中获取数据,然后传递给我的组件以查询其他数据。
//my code in parent component
<template>
<v-list-group v-else v-for='(items, index) in halfpayments' :key="index">
<v-list-tile slot='activator'>
<v-list-tile-title><span class="subheading">{{items.ordnameto}}</span></v-list-tile-title>
</v-list-tile>
<v-list-tile>
<halfpay text='black--text' :ids='items.id'/>
</v-list-group>
</template>
<script>
import halfpay from '@/components/custom/fullHalfpay'
export default {
components: {
halfpay
}
}
//code in child component
<template>
<v-flex>
<v-list-tile v-for='(item) in data' :key="item.id">
<v-list-tile-content>
<v-list-tile-sub-title><span class="caption">Full payment date: </span><span :class="text">{{$dateFilter(item.paid_time)}}</span></v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</v-flex>
</template>
<script>
export default{
props: {
ids: {
type: String,
required: true
},
text:{
type: String,
required: true
}
},
computed: {
data(){
return this.$store.getters.halffullpay(this.ids)
}
}
}
</script>
它的输出,v-for将呈现子组件的所有数据。有没有一种方法可以以特定方式获取数据。唯一的方法是合并两个单独的数据,但是从长远来看,这会使逻辑变得复杂,因为子节点是一个条件渲染,需要满足条件才能应用子组件。
答案 0 :(得分:1)
在您的DOM中使用computed property。每次API返回数据时,您的脚本都会设置this.dataFromAPI
,并且您的计算属性(或多个)将根据需要格式化该数据。或子组件的计算属性是基于“输入”道具的。 (我无法从您的代码中看出)。
.map()
,.reduce()
,无论您需要什么。
您可以像使用DOM中的另一个数据道具一样使用计算出的属性名称,就像this.computedData
在您的data()上一样。