Как установить значения объекта для автозаполнения текстового значения в vuetify

enter image description here

[ { "идентификатор": 1, "начало_время": "10:00", "end_time": "11:30", "активный": правда }выделенный текст ]

Предоставьте достаточно кода, чтобы другие могли лучше понять или воспроизвести проблему.

Community 23.04.2022 14:35
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
1
29
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот рабочая демонстрация.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data(){
    return {
    selectedItems: [],
      items: [ { "id": 1, "start_time": "10:00", "end_time": "11:30", "active": true },{ "id": 2, "start_time": "11:30", "end_time": "01:00", "active": true }]
    }
  },
})
<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-autocomplete
              v-model="selectedItems"
              :items="items"
              filled
              chips
              color="blue-grey lighten-2"
              label="Select"
              item-text="start_time"
              item-value="id"
              multiple
            >
              <template v-slot:selection="data">
                <v-chip
                  v-bind="data.attrs"
                  :input-value="data.selected"
                >
                  {{ data.item.start_time }} ~ {{data.item.end_time}}
                </v-chip>
              </template>
              <template v-slot:item="data">
                  <v-list-item-content>
                    <v-list-item-title>{{ data.item.start_time }} ~ {{data.item.end_time}}</v-list-item-title>
                  </v-list-item-content>
              </template>
            </v-autocomplete>
  </v-app>
</div>

Другие вопросы по теме