How to make Vue material select box showing option when the default value is empty?

Question

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>

Demo link

I would expect to see a 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 an 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?

Answer 1

You can use a computed property to determine the final selected result. Set your initial option value and movie variable to a string, such as "default". Then use a computed property to return the final result like so:

Vue.use(VueMaterial.default)
new Vue({
  el: '#app',
  data: {
    movie: 'default'
  },
  computed: {
    selectedMovie() {
      return this.movie === 'default' ? '' : this.movie
    }
  }
})

#app {
  padding: 30px;
  margin: 50px 0;
}

#selected {
  padding: 15px;
  background: skyblue;
  color: black;
  margin-top: 30px;
}

.as-console-wrapper {
   height: 0;
}

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-material.min.js"></script>
<link href="https://unpkg.com/vue-material/dist/theme/default.css" rel="stylesheet"/>
<link href="https://unpkg.com/vue-material/dist/vue-material.min.css" rel="stylesheet"/>

<div id="app">
  <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">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 id="selected">Selected Movie: {{selectedMovie}}</div>
</div>