在vue.js中对下拉项(来自JSON的响应)进行排序

时间:2019-01-17 12:01:02

标签: vuejs2

有人可以建议我如何在Vue Js中将排序应用于下拉列表吗? 我已经使用vuetify中的v-select

`<v-select v-model='coursesList' :options="courses" :enableDropup="true" options-label="name" options-value="id" name='courseName[]'></v-select>`

    mutations:{
     setCourseItems (state,response){
      state.courseItems=response
    }
   }
JSON:
[
  {
    "stock": "available",
    "name": "Higher Engineering maths"
  },
  {
   "stock": "available",
    "name": "Qantum Physics"
  },
  {
    "stock": "available",
    "name": "Biology"
  }
]

1 个答案:

答案 0 :(得分:0)

在javascript中,您可以使用the sort method对数组进行排序。

这里您的响应似乎是一个json数组,您可以在其上调用sort()并为其提供自定义函数进行排序。示例:

var myArray = [
  {
    stock: "available",
    name: "Higher Engineering maths"
  },
  {
    stock: "available",
    name: "Qantum Physics"
  },
  {
    stock: "available",
    name: "Biology"
  }
]

myArray.sort(function (item1, item2) => {
    //if the result of this method is negative, item2 is considered "bigger" than item1, and vice versa
    return item1.name.toLowerCase() < item2.name.toLowerCase() ? -1 : 1
})

这将按照name字段的字母顺序对数组进行排序。请注意,toLowerCase()不是必需的,但建议您不要控制输入并且不想以其他方式对待大写字母。