0
435
VisualizaçõesHow 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:
Now list looks like this:
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>
·
Santiago Trujillo
1 Respostas
Responde à pergunta0
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>
·
Santiago Trujillo
Relatório
Responde à pergunta