Question

我正在vuematerial下使用vue.js的材料设计框架。

对于普通HTML，可以说我有一个类似这样的选择框：

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

运行脚本时，最初应该看到一个选择框，其中包含文字“您最初应该看到此内容”

但是，当我使用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

我希望看到选择了“默认影片”的选择框，而不是空白的选择框。我注意到，通过将第一个选项框的值设置为其他值，然后使用空字符串（例如-1）可以解决问题，但是对于我的实际情况，我需要将默认值设置为空字符串，因此此解决方法不是适用于我。考虑到这一点，有没有办法使我的价值一开始就显示出来？

Answer 1

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

computed: {
    selectedMovie() {
        return this.movie === 'default' ? '' : this.movie
    }
}

Answer 2

这与vue-mdc无关。根据{{3}}上的文档您需要设置md-select的标签属性以显示默认值

默认值为空时，如何使Vue材料选择框显示选项？

2 个答案: