vue 3，可以v-for“sortedBy”还是“orderBy”？答案

【问题标题】：vue 3, it is possible v-for "sortedBy" or "orderBy"?vue 3，可以v-for“sortedBy”还是“orderBy”？
【发布时间】：2022-01-20 13:43:41
【问题描述】：

好的，所以我在做研究，但在 vue 2 中发现了一些东西，这很有趣，但是对于 vue 3 似乎不可能（我已经测试过）。见参考on here

但我自己却在尝试做一些“相当实验性”的事情

所以请看下面我的“v-for”

                <span
                  v-for="model in sortIndex(colour.relatedModels)"
                  :key="model.id"
                  :style="{ color: colour.colourHex.hex }">
                    <pill-search
                    @pushUp="pushUp($event)"
                    :primColor="colour.primaryColour"
                    :secColor="colour.secondaryColour"
                    :slug="colour.slug"
                    :modelName="model.modelName"
                    ></pill-search>
                </span>

所以我有这个“ v-for="model in sortIndex(colour.relatedModels)”

其中 sortIndex() 是一个接收对象数组的方法，然后我尝试 orderBy

    sortIndex(arrayModels){

   return _.orderBy(arrayModels, [arrayModels.index]);
    },

但实际上什么都不做

重要的是，在该索引中，无非是相关模型对象内的一个字段，这是一个非常受欢迎的范围。

在此处查看我的图表的摘录示例

[
    {
      "colorName": "yellow",
      "slug": "yellow",
      "colourDescription": "",
      "colourHex": {
        "hex": "#BF0000"
      },
      "colourSerie": "XX1",
      "id": "48361636",
      "secondaryColour": "hsla(0, 100.00%, 12.91%, 1.00)",
      "relatedModels": [
        {
          "id": "48355531",
          "index": "5",
          "modelName": "modelOne"
        },
        {
          "id": "48355536",
          "index": "4",
          "modelName": "modelTwo"
        }
      ]
    },
    {
      "colorName": "green",
      "slug": "green",
      "colourDescription": "",
      "colourHex": {
        "hex": "#C3E300"
      },
      "colourSerie": "XX2",
      "id": "58375424",
      "secondaryColour": "hsla(68.45814977973569, 100.00%, 14.24%, 1.00)",
      "relatedModels": [
        {
          "id": "48355512",
          "index": "6",
          "modelName": "modelFour"
        },
        {
          "id": "48354230",
          "index": "5",
          "modelName": "modelOne"
        },
        {
          "id": "48355529",
          "index": "7",
          "modelName": "modelThree"
        }
      ]
    },
    {
      "colorName": "yellow",
      "slug": "yellow",
      "colourDescription": "",
      "colourHex": {
        "hex": "#BF0000"
      },
      "colourSerie": "XX1",
      "id": "48361636",
      "secondaryColour": "hsla(0, 100.00%, 12.91%, 1.00)",
      "relatedModels": [
        {
          "id": "48355531",
          "index": "5",
          "modelName": "modelOne"
        },
        {
          "id": "48355536",
          "index": "4",
          "modelName": "modelTwo"
        }
      ]
    },
    ...
  ]

因此，任何不同方法的帮助或建议都会非常有帮助

【问题讨论】：

标签： javascript vuejs3

【解决方案1】：

因此，与这个解决方案保持一致，我最终在函数调用时出现了拼写错误，所以不是：

   return _.orderBy(arrayModels, [arrayModels.index]);

我更正了：

   return _.orderBy(arrayModels, 'index']);

这对我有用

【讨论】：