如何修复下拉列表中项目的显示？

Question

我有下拉列表。我想将“标题 1234 ”放在下拉列表的第一个位置。重要的是，当选择“标题1234”时，它的值为1234。我应该怎么做？

要像这样得到它：

现在列表看起来像这样：

Vue.createApp({
        data: () => ({
            model: 'title 1234',
            options: {
                1234: 'title 1234',
                1: 'title 1',
                2: 'title 2',
                3: 'title 3',
                10: 'title 10',
            },
        })
    }).mount('#app')

<div id="app">
  <select v-model="model">
    <option v-for="option in options">
      {{ option }}
    </option>
  </select>
  <span>Value: {{ model }}</span>
</div>
    
<script src="https://unpkg.com/vue@next"></script>
<script src="app.js"></script>

Answer 1

您可以使用 aMap及其.entries()方法来获取循环中的键和值for-of

Vue.createApp({
    data: () => ({
        model: '1234',
        options: new Map([
            [ 1234, 'title 1234' ],
            [ 1, 'title 1' ],
            [ 2, 'title 2' ],
            [ 3, 'title 3' ],
            [ 10, 'title 10' ],
        ]),
    }),
}).mount('#app')

<div id="app">
    <select v-model="model">
        <option v-for="[ key, value ] of options.entries()" :value="key">
            {{ value }}
        </option>
    </select>
    <span>Value: {{ model }}</span>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script src="app.js"></script>