Vue2 Vuetify v-autocomplete: как получить результат поиска/отфильтрованный элемент v-autocomplete

Я реализую поиск/фильтрацию в v-autocomplete с множественным выбором и выбором всех. В настоящее время выбрать все будет выбрано все из списка, который включает отфильтрованные/неотфильтрованные (скриншот: выбрано 67 элементов, хотя было отфильтровано до 4). Мне нужно, чтобы выбрать все, чтобы просто выбрать эти 4 элемента (желтое поле).

Вопрос в том, как мне получить/получить доступ к отфильтрованным элементам v-autocomplete?

Видел пост , в котором задавался почти тот же вопрос, что и у меня, но не было ответа от 2019 года. Кто-то упомянул об использовании

this.$refs.autoCompleteRef.filteredItems

Но это не работает.

vuejs2 vuetify.js selectall v-autocomplete

11.04.2023 10:03

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Он работает именно так, как упоминалось.

Смотрите детскую площадку. Проверять лучше в полностраничном режиме.

new Vue({
  vuetify: new Vuetify(),
  el: '#app',
  data () {
    return {
      model: null,
      filter: '',
      searchedItems: [],
      states: [
        'Alabama', 'Alaska', 'American Samoa', 'Arizona',
        'Arkansas', 'California', 'Colorado', 'Connecticut',
        'Delaware', 'District of Columbia', 'Federated States of Micronesia',
        'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho',
        'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
        'Louisiana', 'Maine', 'Marshall Islands', 'Maryland',
        'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
        'Missouri', 'Montana', 'Nebraska', 'Nevada',
        'New Hampshire', 'New Jersey', 'New Mexico', 'New York',
        'North Carolina', 'North Dakota', 'Northern Mariana Islands', 'Ohio',
        'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico',
        'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee',
        'Texas', 'Utah', 'Vermont', 'Virgin Island', 'Virginia',
        'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
      ]
    }
  },
  watch: {
    filter() {
      this.searchedItems = this.$refs['selectExample']?.filteredItems
    }
  }
})

#app { line-height: 3; }
[v-cloak] { display: none; }

<link href = "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel = "stylesheet" />
<link href = "https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel = "stylesheet" />
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel = "stylesheet" />
<div id = "app">
<v-app id = "inspire">
  <v-card>
    <v-card-title class = "headline font-weight-regular blue-grey white--text">Profile</v-card-title>
    <v-card-text>
      searchedItems: {{ searchedItems }}
      <v-subheader class = "pa-0">Where do you live?</v-subheader>
      <v-autocomplete
        v-model = "model"
        :items = "states"
        label = "State"
        :search-input.sync = "filter"
        ref = "selectExample"
      >
      </v-autocomplete>
    </v-card-text>
  </v-card>
</v-app>
</div>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

Я добавил часы в свой код и отладил его. Это не определено. Позвольте мне сначала попытаться и дайте вам знать. Большое спасибо за ответ кстати!

— 13.04.2023 18:34

11.04.2023 10:31