在VueJS的子组件中显示计算结果

Question

我从Axios请求中提取数据。我有大约500条记录，每条记录都有几个结果。为了方便起见，我把它简化了。

我将主组件上的数据显示为下拉菜单，其中一个条目显示为"John"，另一个条目为"Jane"。它拆分JSON数据并删除重复数据，这样做效果很好。

我遇到的问题是如何在子组件中显示相同的数据。此时，它只显示"Jane，Jane，Jane、John、John、Jane"。

我必须为此在子组件中执行其他方法吗？我可以传入一个具有唯一名称的道具，但它只是在每个结果中显示所有名称。

任何帮助都将不胜感激。

JSON-

"results": [
"result": {
"name": "Jane,Jane,John,John,John,John,Jane,Jane,"
}
"result": {
"name": "Jane,Jane,Jane,John,John,John,Jane,"
}
"result": {
"name": "John,Jane,"
}
"result": {
"name": "Jane"
}
]

主要组件

<Result
v-for="result in Results"
:result="result"
:key="result.docNum"
/>
<ul v-for="name in uniquenames" :key="name">
<li>
<label class="pr-2" for="name">{{ name }}</label>
<input                           
type="checkbox"
v-model="names"
:value="name"                             
/>
</li>
</ul>

methods: {
const metanames = this.Results
.filter((result) => results.result && results.result.name)
.map((item) => item.name)
.filter((names, i, arr) => arr.indexOf(names) === i)

let names = []
metanames.forEach((item) => {
const splitArr = item.split(', ')
names = names.concat(splitArr)
})
this.uniquenames = names.filter(
(names, i, arr) => arr.indexOf(names) === i,
)
}

子组件

<template>
<div>                
{{ name }}
</div> 
</template>

<script>
export default {
name: "result", 

props: {
result: Object,     
},

data: function () {
return {       
name: this.results.result.name
}
}

Answer 1

Parent模板中的<Result>组件正在循环中传递Result的项，但您没有修改Result，因此传入了原始的非唯一名称数组。请创建并传递一个计算属性，该属性应该是所需格式的Result的修改版本。计算属性可以在其依赖项(原始Result(发生更改时自动更新/重新格式化。每当计算的属性更新时，道具也会更新

<Result
v-for="result in modifiedResults"
:result="result"
:key="result.docNum"
/>

computed: {
modifiedResults() {
// unfinished code for returning modified Results containing array of unique names
return [...this.Results].map(r => {
let uniquenames = getUniqueNames(r.names)
return { ...r, names: uniquenames }
})
},
},

正如注释所说，您需要完成/更改computed属性才能返回您想要的内容。我无法做到这一点，因为我不完全确定代码中所有不同的数组和对象属性是如何组合在一起的，但计算属性绝对是可行的！