当默认值为空时，如何使 Vue material select 框显示选项？

Question

我在 vue.js 下为 material 设计框架使用 vuematerial。

对于正常的 HTML，假设我有一个这样的 select离子盒：

<select>
    <option value="">You should initially see this</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

当您运行脚本时，最初您应该会看到一个 selection 框，其中包含文本 "You should initially see this"

然而，当我使用 vuematerial 做类似的事情时：

<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

我希望看到选择了 "Default film" 的 select 框，而不是空白的 select 框。我注意到通过将第一个选项框的值设置为空字符串（例如 -1）以外的值可以解决问题，但对于我的实际情况，我需要将默认值设置为空字符串，因此此解决方法不是适用于我。考虑到这一点，有没有一种方法可以使值在初始时显示？

Answer 1

这不是 vue-mdc 的工作方式。根据 https://stasson.github.io/vue-mdc-adapter/#/component/select 上的文档您需要设置 md-select 的 label 属性以显示默认

Answer 2

您可以使用计算的属性来确定最终选择的结果。将初始选项值和 movie 变量设置为字符串，例如 "default"。然后使用计算属性到 return 最终结果如下：

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/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-material@1.0.0-beta-11/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>

当默认值为空时，如何使 Vue material select 框显示选项？

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

html

javascript

css

vue.js

vue-material