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

Question

I have a function I want to pass a value to in my Vue app using v-select. v-select is populated from a data array 'chapters'. I then want to use the selected id to pass to a function.

I have an empty data variable 'chapterIdFilter' in my data return which is set to a value of 1 - this pre-filters my vuetify data table

How can I pass the value of the id - chapterIdFilter - from my v-select dropdown to a function in my methods so I can filter the table with it? The chapterIdFilter is always '1'

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

Method:

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

UPDATE:

So the code below works as desired but I am not sure it should or know why

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

Answer 1

You should bind v-model directive to the data property and use it with this in your method :

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

method:

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