I want to bind a custom attribute to an option select menu.
The <option>
tag would simply have an attribute of selected="selected"
<template>
<div>
<select>
<option v-for="" v-bind:selected="[condition ? selected : notSelected]" value="">{{ resource.xprm_name }}</option>
</select>
</div>
</template>
data: {
selected: "selected",
notSelected: ""
}
This does not work, but if I change v-bind:selected
to v-bind:class
then it receives the appropriate class, so the logic is working, but not with the selected
attribute.
Any way to make it work with such custom attributes?
You can just use v-model
for selecting a default value on a select box:
Markup:
<div id="app">
<select v-model="selected">
<option value="foo">foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
</select>
</div>
View Model:
new Vue({
el: "#app",
data: {
selected: 'bar'
}
});
Here's the JSFiddle: https://jsfiddle.net/Lxfxyqmf/