Отмена выбора вариантов упорядочения ключей вместо фактического

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

Порядок свойств в объекте javascript не гарантируется. , один из способов сохранить порядок - удерживать ключи в массиве и затем циклически проходить по массиву.

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>