vuejs 和 vuex ||从 v-for 中查找数据以获取另一个数据答案

【问题标题】：vuejs and vuex || find data from v-for to get another datavuejs 和 vuex ||从 v-for 中查找数据以获取另一个数据
【发布时间】：2019-04-06 21:35:52
【问题描述】：

我目前正在我们学校做我的顶点项目。目前我正在为我的 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 会渲染子组件的所有数据。有没有办法以特定方式获取数据。唯一的方法是合并 2 个单独的数据，但从长远来看它会使逻辑复杂化，因为子节点是一个条件渲染，它需要满足应用子组件的条件。

【问题讨论】：

标签： node.js vue.js nuxt.js

【解决方案1】：

在您的 DOM 中使用 computed property。每次 API 返回数据时，您的脚本将设置 this.dataFromAPI，并且您的计算属性（或多个）将根据需要格式化该数据。或者子组件的计算属性基于“输入”道具。（我不能从你的代码中完全看出）。

.map() 它，.reduce() 它，无论你需要什么。

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

【讨论】：