如何将值从 v-select 传递给方法 - 它始终与默认值相同

Posted 2023-02-16

【中文标题】如何将值从 v-select 传递给方法 - 它始终与默认值相同

【英文标题】：How can I pass a value from v-select to method - it always stays the same as the default

【发布时间】：2021-04-01 10:39:29

【问题描述】：

我有一个函数，我想使用 v-select 在我的 Vue 应用程序中传递一个值。 v-select 是从数据数组“章节”中填充的。 然后我想使用选定的 id 传递给函数。

我的数据返回中有一个空的数据变量“chapterIdFilter”，它的值设置为 1 - 这会预过滤我的 vuetify 数据表

如何将 id - 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)) 
  ,

【参考方案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))
  

【讨论】：

感谢 Boussadjra - 奇怪的是它仍然返回默认值。如果在当前项目参数中返回 chapterIdFilter，那么我得到所选选项的 id 值。更改 @change="currentDataItems" 似乎通过它，因为它是绑定的？我会更新我正在工作的代码，但我很困惑为什么它会工作

尝试添加return-object prop like <v-select return-object ...