I am using the vuematerial for material design framework under vue.js.
For normal HTML, let say I have a selection box like this:
<select>
<option value="">You should initially see this</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
When you run the script, initially you should see a selection box with the text "You should initially see this"
However, when I am using vuematerial to do something similar:
<template>
<div>
<div class="md-layout md-gutter">
<div class="md-layout-item">
<md-field>
<md-select v-model="movie" name="movie" id="movie">
<md-option value="">Default film</md-option>
<md-option value="fight-club">Fight Club</md-option>
<md-option value="godfather">Godfather</md-option>
<md-option value="godfather-ii">Godfather II</md-option>
<md-option value="godfather-iii">Godfather III</md-option>
<md-option value="godfellas">Godfellas</md-option>
<md-option value="pulp-fiction">Pulp Fiction</md-option>
<md-option value="scarface">Scarface</md-option>
</md-select>
</md-field>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'BasicSelect',
data: () => ({
movie: '',
})
}
</script>
I would expect seeing an select box with "Default film" chosen, instead of a blank select box. I noticed that by setting the value of the first option box to be something other then an empty string (e.g. -1) solves the problem, but for my actual case I need the default value to be empty string, so this workaround is not applicable to me. With that in mind, is there a way I can make the value to be shown initially?
from How to make Vue material select box showing option when the default value is empty?
No comments:
Post a Comment