vuejs和vuex ||从v-for中查找数据以获取其他数据

时间:2018-11-02 15:59:51

标签: node.js vue.js nuxt

我目前正在学校里做我的顶峰项目。目前,我正在为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将呈现子组件的所有数据。有没有一种方法可以以特定方式获取数据。唯一的方法是合并两个单独的数据,但是从长远来看,这会使逻辑变得复杂,因为子节点是一个条件渲染,需要满足条件才能应用子组件。

1 个答案:

答案 0 :(得分:1)

在您的DOM中使用computed property。每次API返回数据时,您的脚本都会设置this.dataFromAPI,并且您的计算属性(或多个)将根据需要格式化该数据。或子组件的计算属性是基于“输入”道具的。 (我无法从您的代码中看出)。

.map().reduce(),无论您需要什么。

您可以像使用DOM中的另一个数据道具一样使用计算出的属性名称,就像this.computedData在您的data()上一样。