Quasar framework v-on:input does nothing

Question

I have a simple search input in Quasar app, which should listen on input event. But it does not. The code looks like:

<template>
    <div id="searchWrapper">
        <div class="row justify-center flex-direction q-px-lg-md">
            <h1 class="col-sm-6">StarWars search</h1>
        </div>
        <div id="search" class="row justify-center flex-direction q-px-lg-md">
            <div class="col-sm-6">
                <q-input outlined v-model="search" v-on:input="searchPeople" name="search" label="Name" />
            </div>
        </div>
        <div class="row justify-center flex-direction ">
            <q-list v-if="searchStatus == 'success'" bordered separator class="col-sm-6">
                <q-item v-for="item in searchResult" :key="item.id" clickable v-ripple>
                    <q-item-section>{{item.name}}</q-item-section>
                </q-item>
            </q-list>
        </div>
    </div>
</template>

<script>
import { defineComponent } from 'vue';
import { api } from 'boot/axios';

export default defineComponent({
    name: 'PageIndex',

    data() {
        return {
            search: "",
            searchResult: [
                {
                    id: 1,
                    name: 'Luke',
                },
                {
                    id: 2,
                    name: 'Lea',
                }
            ],
            loading: false,
        }
    },
    ...

    methods: {
        searchPeople() {
            console.log('teeeeeeeeeeeeeeeeest');
            this.loading = true;
            api.get('https://swapi.py4e.com/api/people?search' + this.search)
                .then( result => {
                    console.log(result);
                })
                .catch( error => {

                })
                .then( () => {
                    this.loading = false
                });
            },
    },


})
</script>

I dont see console.log('teeeeeeeeeeeeest') nor the error. Nothing. Native Vue @input works fine. But Queasar not. What is wrong with this code?

Answer 1

I would remove the v-model and instead use @input=searchPeople and :value= "search". In the method I would then only change one thing i-e this.search

methods: {
        searchPeople() {
            console.log('teeeeeeeeeeeeeeeeest');
            this.loading = true;
            this.search = event.target.value // This would add the value entered in the input
            api.get('https://swapi.py4e.com/api/people?search' + this.search)
                .then( result => {
                    console.log(result);
                })
                .catch( error => {

                })
                .then( () => {
                    this.loading = false
                });
            },
    }