반응형
Vue.js: 항목을 v-for의 계산된 프로펠러로 전달하고 하위 어레이를 정렬하여 반환하시겠습니까?
이걸 어떻게 하는지 알아내기 위해 꽤 오랫동안 구글을 검색해왔는데..
각각 "엔티티" 목록을 얻은 "엔티티" 목록이 중첩된 v-for에 표시됩니다.
의도는 이미 계산되어 있습니다만, 「엔티티」리스트도 즉석에서 정렬할 필요가 있기 때문에, 그 리스트를 작성하는 것도 계산된다고 생각했습니다.
오류:
**TypeError: _vm.entityList is not a function**
이것이 현재 저의 접근법입니다.
< script >
import uniq from 'lodash/uniq'
import orderby from 'lodash/orderby'
import Util from "@/components/util.js"
export default {
data() {
return {
// ....
}
},
computed: {
nluData() {
return orderby(this.$store.getters.nlujson.filter(item => {
return item.intent.toLowerCase() === this.selectedIntent
}), ['intent', 'text'], ['asc', 'asc'])
},
entityList(item) {
return orderby(item.entities, ['entity', 'value'], ['asc', 'asc'])
},
},
created() {
this.$store.dispatch('getNluJson')
},
methods: {
// ......
}
</script>
// parent structure
<div v-for="(item, key, index) in nluData">
// displaying nluData content through item.mydata // child structure
<div v-for="ent in entityList(item)">
// displaying entities data through computed prop. // item.entities is the array
</div>
</div>
{
"id": "J4a9dGEBFtvEmO3Beq31",
"text": "This is Intent 1",
"intent": "shelf_life",
"entities": [
{
"start": "33",
"end": "44",
"value": "fridge",
"entity": "ingredient_placement"
},
{
"start": "10",
"end": "20",
"value": "duration",
"entity": "shelf_life"
},
{
"start": "25",
"end": "30",
"value": "spareribs",
"entity": "ingredient"
}
]
},
다음과 같이 익명 함수를 사용하여 계산된 속성에 매개 변수를 전달할 수 있습니다.
computed: {
entityList() {
return (item) =>
orderby(item.entities, ['entity', 'value'], ['asc', 'asc']);
},
},
계산된 속성에는 매개 변수가 없습니다.당신의 경우, 소품은entityList()
는 메서드여야 합니다.
methods : {
entityList(item) {
return orderby(item.entities, ['entity', 'value'], ['asc', 'asc'])
},
},
언급URL : https://stackoverflow.com/questions/48683266/vue-js-passing-item-as-parameter-to-computed-prop-in-v-for-returning-child-ar
반응형
'sourcecode' 카테고리의 다른 글
vuejs를 사용하여 모델을 동적으로 생성할 때 DOM 컨트롤에서 값을 가져오는 방법 (0) | 2022.08.21 |
---|---|
캐시 라인에 대한 정렬 및 캐시 라인 크기 파악 (0) | 2022.08.21 |
이미 정규화된 vuex-orm 데이터베이스에 데이터를 삽입하는 중 (0) | 2022.08.21 |
Nuxt에서 Create() 글로벌 앱보다 먼저 접속하려면 어떻게 해야 하나요? (0) | 2022.08.21 |
vim에서 C 코드를 자동 포맷/인디트하려면 어떻게 해야 합니까? (0) | 2022.08.21 |