Question

我正在使用Vue2并尝试对v-for进行排序。我正在遍历对象，并且vue-doc指出：

遍历对象时，顺序基于键 Object.keys（）的枚举顺序，不能保证是在JavaScript引擎实现中保持一致。

我没有排序的v-for看起来像这样：

<my-component :key="key + value + uid" 
v-for="(value,key) in myObject" :key-prop="key" 
:value-prop="value"></my-component>

如果Object.keys（）不一致，该如何排序？

编辑：这是一个示例对象（从Rest-Service返回）

Chrome控制台记录以下内容：

{
HUMID: "66%"
DAY: "true"
TEMP: "30"
}

实际对象更大。

Edit2：

借助于“ Oli Crt”，我解决了这个问题。在我的情况下，我无法将sortedObjects计算为计算属性，但在获取Rest-Service的响应时触发了它。

sortObject: function() {
    this.myObjectSorted =  Object.keys(this.myObject).sort();
}

这将导致以下对象：

{
0: "DAY"
1: "HUMID"
2: "TEMP"
}

通过将此已排序对象的值作为我的键属性，并使用

获得未排序对象的实际值（66％，true，30）

myObject[value]

我得到了预期的结果。

<my-component :key="key + value + uid" 
v-for="(value,key) in myObjectSorted" :key-prop="value" 
:value-prop="myObject[value]"></my-component>

Answer 1

我认为您应该使用计算所得的属性。
您可以对对象的键进行排序

Get-Acl : Cannot find path '\\SERVER\Work\TEst' because it does not exist.
At C:\Users\felipe\Desktop\Script\NewProjectFolder\NewProject-WP_- 
_ProductionV3.ps1:125 char:8
+ $acl = Get-Acl $NewNetworkPath
+        ~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo          : ObjectNotFound: (:) [Get-Acl], 
ItemNotFoundException
+ FullyQualifiedErrorId : 
GetAcl_PathNotFound_Exception,Microsoft.PowerShell.Commands.GetAclCommand

You cannot call a method on a null-valued expression.
At C:\Users\felipe\Desktop\Script\NewProjectFolder\NewProject-WP_- 
_ProductionV3.ps1:128 char:1
+ $acl.SetAccessRule($rule)
+ ~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo          : InvalidOperation: (:) [], RuntimeException
+ FullyQualifiedErrorId : InvokeMethodOnNull

然后将myObject [key]与myObjectSorted中的键一起用于v-for。

对对象（vue2）进行v-for排序

1 个答案: