Как передать значение из v-select в метод - оно всегда остается таким же, как значение по умолчанию

У меня есть функция, которой я хочу передать значение в моем приложении Vue с помощью v-select. v-select заполняется из массива данных chapters. Затем я хочу использовать выбранный идентификатор для перехода к функции.

У меня есть пустая переменная данных chapterIdFilter в моем возвращении данных, для которой установлено значение 1 - это предварительно фильтрует мою таблицу данных vuetify

Как я могу передать значение идентификатора - chapterIdFilter - из раскрывающегося списка v-select функции в моих методах, чтобы я мог фильтровать с его помощью таблицу? ChapterIdFilter всегда равен 1

    <v-select
          :model="chapterIdFilter"
          :items="chapters"
          item-text="locale.en.title"
          item-value="id"
          label="Filter by Chapter"
          @change="currentDataItems(chapterIdFilter)"
        />

Метод:

currentDataItems (chapterIdFilter) {
    console.log(chapterIdFilter)
    return this.portals.filter(val => val.chapterId === parseInt(chapterIdFilter)) // this.portals.filter(val => val.chapterId === '1')
  }

ОБНОВИТЬ:

Таким образом, приведенный ниже код работает так, как нужно, но я не уверен, что он должен или не знаю, почему

    currentDataItems (chapterIdFilter) {
  
    console.log(chapterIdFilter)
    this.chapterIdFilter = chapterIdFilter
    return this.portals.filter(val => val.chapterId === parseInt(this.chapterIdFilter)) 
  },

vue.js vuetify.js v-select
person joomkit    schedule 22.12.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны привязать директиву v-model к свойству data и использовать ее с this в своем методе:

    <v-select
          v-model="chapterIdFilter"
          :items="chapters"
          item-text="locale.en.title"
          item-value="id"
           return-object
          label="Filter by Chapter"
          @change="currentDataItems"
        />

метод:

currentDataItems () {
    console.log(this.chapterIdFilter)
    return this.portals.filter(val => val.chapterId === parseInt(this.chapterIdFilter))
  }
person Boussadjra Brahim    schedule 22.12.2020
comment
Спасибо, Boussadjra - как ни странно, но по-прежнему возвращается значение по умолчанию. Если вернуть chapterIdFilter в аргументе текущего элемента, я получаю значение идентификатора выбранной опции. Изменение @ change = currentDataItems, похоже, передает его, потому что он привязан? Я обновлю код, который у меня есть, но я озадачен, почему он работает - person joomkit; 23.12.2020
comment
попробуйте добавить return-object опору, например <v-select return-object ... - person Boussadjra Brahim; 23.12.2020