Quasar 框架 v-on:input 什么都不做

Question

我在 Quasar 应用程序中有一个简单的搜索输入，它应该监听输入事件。但事实并非如此。代码如下：

<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>

我没有看到 console.log('teeeeeeeeeeeeest') 也没有看到错误。没有什么。 Native Vue @input 工作正常。但奎萨不是。这段代码有什么问题？

Answer 1

<div class="col-sm-6">
  <q-input outlined v-model="search" v-on:change="searchPeople()" name="search" label="Name" />
</div>

或

<div class="col-sm-6">
  <q-input outlined v-model="search" @change="searchPeople()" name="search" label="Name" />
</div>

Answer 2

我会删除 v-model 并使用 @input=searchPeople 和 :value= "search"。在这个方法中，我只会改变一件事，即 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
                });
            },
    }

Answer 3

你的代码很好，我看到的唯一细节是 searchStatus 变量未定义，这可能是你的代码出错了。我在我的本地测试过并且有效

Quasar 框架 v-on:input 什么都不做

Quasar framework v-on:input does nothing

events

vuejs2

quasar-framework

quasar