Vue.js:将 item 作为参数传递给 v-for 中的计算 prop,返回已排序的子数组?

Ter*_*ård 5 javascript vue.js vuejs2

已经在谷歌上搜索了很长一段时间来弄清楚如何做到这一点..

我有一个“意图”列表,每个人都有一个“实体”列表,以嵌套的 v-for 形式呈现。

已经计算了意图,但我还需要即时对“实体”列表进行排序,因此我认为制作该列表也计算了..

错误 :

**TypeError: _vm.entityList is not a function**
Run Code Online (Sandbox Code Playgroud)

这是我目前的方法:

**TypeError: _vm.entityList is not a function**
Run Code Online (Sandbox Code Playgroud)
< 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>
Run Code Online (Sandbox Code Playgroud)

小智 19

您可以使用匿名函数将参数传递给计算属性,如下所示:

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


thr*_*n19 5

计算属性没有任何参数。在你的情况下,道具entityList()必须是一个方法:

methods : {
    entityList(item) {
      return orderby(item.entities, ['entity', 'value'], ['asc', 'asc'])
    },
},
Run Code Online (Sandbox Code Playgroud)

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