CODEWITHSUNDEEP
javascriptvue.jsjavascript-objectshtml-select
Владимир
Владимир

Reputation: 34

How do I fix display of items in dropdown list?

I have dropdown list. I want to put "title 1234" in first place of dropdown list. It is important that when "title 1234" is selected, its value is 1234. How should I do it?

To get it like this:

target screen

Now list looks like this:

screen now

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>

Upvotes: 3

Views: 89

Answers (1)

shaedrich
shaedrich

Reputation: 5735

You can use a 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>

Upvotes: 5

Related Questions