javascript - Vue JS Option 元素 "selected"只是属性，需要它作为属性

Question

如果 selected 存在于选项对象上，则尝试获取默认选择的选项

这是我的:

<template>
    <select v-model="model" :placeholder="placeholder">
        <option v-for="option in options" :value="option.value" :selected="option.selected">{{option.label}}</option>
    </select>
</template>

<script>
export default {
    props: {
        model: {
            default: null
        },
        placeholder: {
            default: null
        },
        options: {
            default: null
        }
    }
};
</script>

这正确设置了选定的属性，我可以在元素资源管理器中看到它 这似乎不起作用，因为它只是一个属性，如果我检查元素，它的“selected”属性是错误的! 如何设置选项元素的选定属性？

Answer 1

只需要将原来选择的值设置为v-model的值即可，即

new Vue({
    el: '#app',
    data: {
        options: [
        	{
            	value: 'foo',
                label: 'foo label',
            },
        	{
            	value: 'bar',
                label: 'bar label',
            },
        	{
            	value: 'baz',
                label: 'baz label',
            },        
        ],
        selected: 'bar',
    }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">

    <select v-model="selected">
        <option v-for="option in options" :value="option.value">{{option.label}}</option>
    </select>

</div>