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

Question

我有下拉列表。我想将“title 1234”放在下拉列表的第一位。 It is important that when "title 1234" is selected, its value is 1234. How should I do it?

这样得到它：

现在列表如下所示：

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

您可以使用 Map and its .entries() method to get both the key and the value in your for-of loop

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>

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

How do I fix display of items in dropdown list?

javascript

html-select

javascript-objects

vue.js