Как сделать так, чтобы в поле выбора материала Vue отображалась опция, когда значение по умолчанию пусто? - PullRequest
Новая
       17

Как сделать так, чтобы в поле выбора материала Vue отображалась опция, когда значение по умолчанию пусто?

2 голосов
/ 29 мая 2019

Я использую 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>

Демонстрационная ссылка

Я бы ожидал увидеть поле выбора с выбранным «Фильмом по умолчанию» вместо пустого поля выбора. Я заметил, что, установив значение первого поля параметра как нечто иное, чем пустая строка (например, -1), решает проблему, но для моего реального случая мне нужно, чтобы значение по умолчанию было пустой строкой, поэтому этот обходной путь не применимо ко мне. Имея это в виду, есть ли способ сделать значение, которое будет показано изначально?

Ответы [ 2 ]

3 голосов
/ 31 мая 2019

Вы можете использовать вычисленное свойство для определения окончательного выбранного результата.Установите начальное значение параметра и переменную movie в строку, например «по умолчанию».Затем используйте вычисленное свойство, чтобы вернуть окончательный результат, например, так: 

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>
0 голосов
/ 29 мая 2019

Это не так, как это работает с Vue-MDC.В соответствии с документами на https://stasson.github.io/vue-mdc-adapter/#/component/select вам нужно установить метку prop md-select для отображения значения по умолчанию

...