Vue
HTML
<div id="app">
</div>
CSS
body {
padding: 50px;
}
label {
display: block;
}
Vue
const Selectbox = {
props: {
value: String
},
methods: {
select($event, value) {
// The example works but having
// $event.target.value here seems very wrong
this.$emit('input', $event.target.value);
}
},
template: `
<div>
<select :value="value" @change="select($event, value)">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div>The value is {{ value }}.</div>
</div>`
};
new Vue({
el: "#app",
components: { Selectbox },
data: () => ({
selectboxValue: 1
}),
template: `
<div>
<selectbox v-model="selectboxValue" />
</div>
`
})