sourcecode

Vue.js: 항목을 v-for의 계산된 프로펠러로 전달하고 하위 어레이를 정렬하여 반환하시겠습니까?

copyscript 2022. 8. 21. 19:51
반응형

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'])
    },
},

https://vuejs.org/v2/guide/computed.html

언급URL : https://stackoverflow.com/questions/48683266/vue-js-passing-item-as-parameter-to-computed-prop-in-v-for-returning-child-ar

반응형