Proper way to filter and update an ion-list [ionic vue]

Ionic Framework Ionic Vue
1

I am somehow stuck right now. what I want to do seems rather basic. I want to filter an ion-list depending on some ion-select (v-model filterSize) choices however I can’t get it to work. here is my code

<ion-select multiple="false" cancel-text="back" ok-text="ok" v-model="filterSize" @ionChange="onChange($event)">
          <ion-select-option value="0">small</ion-select-option>
          <ion-select-option value="1">middle</ion-select-option>
          <ion-select-option value="2">big</ion-select-option>
</ion-select>
...
<ion-list>
<ion-item :key="animal.id" v-for="animal in animals">
           <ion-label>
                <h2>{{ animal.name_dt }}</h2> 
              </ion-label>
         </ion-item>
</ion-list>
...
data() {
    const { animals } = getAllAnimals();
    const filterSize = [] as number[];
    return {
      filterSize, animals
     }
}
methods: {
    async onChange (e: Event) {
         console.log(JSON.stringify(this.filterSize));
          const {animals} = await getFilterAnimals(this.filterSize);
          console.log(JSON.stringify(e));
          this.$forceUpdate();
          return animals;
    }
}

however the v-model filterSize seems to be empty and the list does never change therefore. is filterSize wrongly declared? and how do I properly update the animals ion-list then after the onChange is fired?
thank you very much if someone can give me a hint

EDIT: I read that Ionic Vue has a problem with binding the v-model in an Ion-Select. that would explain my troubles. is that still the case in the latest version and if yes is there a workaround?

2

EDIT : I read that Ionic Vue has a problem with binding the v-model in an Ion-Select . that would explain my troubles. is that still the case in the latest version and if yes is there a workaround?

v-model should work fine with ion-select. The issue here is that you are not actually updating the animals array in data, you are just returning a variable called animals from the onChange function.

In order for the list to be filtered, you need to update the data source that it is reading from.

Another way to do this is to use a ref in the setup method:

import { ref } from 'vue';

...

setup() {
  const animals = ref(getAllAnimals());
  const filterSize = ref([]);
  const onChange = async () => {
    animals.value = await getFilterAnimals(filterSize.value);
  }

  return { animals, filterSize, onChange }
}
3

thank you very much @ldebeasi - your solution is very elegant and it works now

however the v-model doesn’t seem to be automatically updated in the ionChange. I have to do it manually via filterSize.value = e.target.value; if someone has the same trouble

4

What version of Ionic Vue are you using? You can run ionic info in the project directory to find out.

5

Ionic CLI: 6.12.3
Ionic Framework: @ionic/vue 5.5.2

6

Can you try v5.5.4?

npm install @ionic/vue@5.5.4 @ionic/vue-router@5.5.4

If that still doesn’t work, send a GitHub repo and I can take a closer look.