Блог

Главная - Вопросы по программированию - Vuetify v-выберите не показывать параметры

Vuetify v-выберите не показывать параметры

#vue.js #vuetify.js #v-select

#vue.js #vuetify.js #v-выбрать

Вопрос:

У меня есть компонент, который получает адрес от пользователя, и частью этого является состояние. Я следил за документацией и не могу найти ничего отличного в моем коде по сравнению с документацией. Проблема в том, что когда я нажимаю кнопку, чтобы показать параметры, ничего не видно. Если я введу имя, оно будет выбрано так, как ожидалось. Все остальные входные данные работают без проблем, но они представляют собой v-текстовые поля. Помимо некоторых вопросов проверки, нет никаких проблем, которые я мог бы выявить.

 <template>
  <v-card>
    <v-container>
      <!-- some other stuff -->
      <v-select
        :items="items"
        label="State"
        @input="_=>state=_"
      ></v-select>
    </v-container>
  </v-card>
</template>

<script>
export default {
  data: () => ({
    items: [
      '',   'AL', 'AK', 'AZ', 'AR',
      'CA', 'CO', 'CT', 'DE', 'DC',
      'FL', 'GA', 'HI', 'ID', 'IL',
      'IN', 'IA', 'KS', 'KY', 'LA',
      'ME', 'MD', 'MA', 'MI', 'MN',
      'MO', 'MS', 'MT', 'NE', 'NV',
      'NH', 'NH', 'NM', 'NY', 'NC',
      'ND', 'OH', 'OK', 'OR', 'PA',
      'RI', 'SC', 'SD', 'TN', 'TX',
      'UT', 'VT', 'VA', 'WA', 'WV',
      'WI', 'WY', 'AS', 'GU', 'MP',
      'PR', 'VI'
    ]
  })
}
</script>

Ответ №1:

Вам нужно обернуть содержимое шаблона с v-app :

 <template>
  <v-app>
    ...
  </v-app>
</template>

Лучше сделать это в App.vue , чтобы применить ко всем компонентам приложения.

Комментарии:

1. Не знаю, почему это нигде не включено. Существует около 5 различных способов создания приложения vue, и, похоже, в каждом есть свои нюансы. Добавление v-app тега в мой проект исправило отсутствие отображения списка. Спасибо

Ответ №2:

Согласно документации vuetify: элементы — это объекты, которые должны иметь text value свойства и: Vuetify.js v-выберите документацию api

Таким образом, ваше data.items объявление будет:

 <script>
export default {
  data: () => ({
    items: [
      { text: '---', value: '' },
      { text: 'AL', value: 'AL' },
      { text: 'AK', value: 'AK' },
      ...
    ]
  })
}
</script>

Очевидно, что вы можете поместить что угодно в text реквизит, то есть: полные имена состояний.