如何将值从 v-select 传递给方法 - 它始终与默认值保持一致

Question

我有一个函数，我想在我的 Vue 应用程序中使用 v-select 传递一个值。 v-select 从数据数组 'chapters' 填充。然后我想使用 selected id 传递给一个函数。

我的数据 return 中有一个空数据变量 'chapterIdFilter'，它的值设置为 1 - 这预过滤了我的 vuetify 数据 table

如何将 id - chapterIdFilter - 从我的 v-select 下拉列表传递到我的方法中的函数，以便我可以用它过滤 table？ 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)) 
  },

Answer 1

您应该将 v-model 指令绑定到数据属性并在您的方法中将其与 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))
  }

如何将值从 v-select 传递给方法 - 它始终与默认值保持一致

How can I pass a value from v-select to method - it always stays the same as the default

vue.js

vuetify.js

v-select