Vue.js：将项目作为参数传递给 v-for 中的计算道具，返回排序的子数组？

Question

Have been googling around for quite a while to figure out how to do this..

I have a list of "Intents", which each of them got a list of "Entities", presented in a nested v-for.

Intents are already computed, but i need to also sort the "Entities" list on the fly, so therefore i thought that making that list also computed..

Error :

**TypeError: _vm.entityList is not a function**

This is my current approach :

 < 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" } ] },

Answer 1

You can pass parameters to a computed property with an anonymous function like so:

computed: {
  entityList() {
    return (item) =>
      orderby(item.entities, ['entity', 'value'], ['asc', 'asc']);
    },
  },

Answer 2

A computed property don't get any params. In your case, the prop entityList() must be a method :

methods : {
    entityList(item) {
      return orderby(item.entities, ['entity', 'value'], ['asc', 'asc'])
    },
},

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