Friday 31 May 2019

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

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 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