I have implemented the material design framework vuematerial with vue.js.
In traditional HTML, a selection box looks 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, the selection box should initially display "You should initially see this"
However, when using vuematerial to achieve a similar result:
<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() {
return {
movie: '',
}
}
}
</script>
Instead of seeing an empty select box, I expect to see one with "Default film" selected. Changing the value of the first option to something other than an empty string fixes this issue, but that workaround does not work for my current scenario where the default value needs to be an empty string. Is there a way to show the initial value?