Question

当我尝试使用硬编码示例时，选择选项的实际行为如下：

<select>
   <option value="3">C</option>
   <option value="1">A</option>
   <option value="2">B</option>
</select>

order is : C, A, B

但是，当我尝试使用Vue时，它将命令它们作为键：

data: {
    obj: {
      "2": "BBB",
      "1": "AAA",
      "3": "CCC"
    }
 }

<select>
   <option v-for="(item, key) in obj" :value="key">{{ item }}</option>
</select>

order is : AAA, BBB, CCC

因此它将它们作为键值排序。

在这种情况下，是否可以将它们作为对象的顺序而不是键进行排序？

例如：BBB，AAAA，CCC

在这里我测试了两种情况的小提琴：

https://jsfiddle.net/1Ljd96qk/

Answer 1

Properties order in javascript object is not guaranteed，保持顺序的一种方法是将键保持在数组中，然后在数组中循环。

new Vue({
  el: '#app',
  data: {
    keys: ['2', '1', '3'],
    obj: {
      "2": "BBB",
    	"1": "AAA",
      "3":"CCC"
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <select>
     <option v-for="key in keys" :value="key">{{ obj[key] }}</option>
  </select>
  
    <select>
      <option value="3">C</option>
      <option value="1">A</option>
      <option value="2">B</option>
  </select>
</div>

Forlooping选择选项作为键而不是实际顺序排序

1 个答案: