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

【问题标题】：Quasar framework v-on:input does nothingQuasar 框架 v-on:input 什么都不做
【发布时间】：2021-08-31 09:15:46
【问题描述】：

我在 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('teeeeeeeeeeeeeeest') 也没有错误。没有。原生 Vue @input 工作正常。但奎萨没有。这段代码有什么问题？

【问题讨论】：

有什么理由在同一个输入上使用 v-model 和 @input？你可以通过使用 @input="SearchPeople" :value = "search"

标签： events vuejs2 quasar-framework quasar

【解决方案1】：

我会删除 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
                });
            },
    }

【讨论】：

我认为 v-modal 与 :value 相同。
我相信不要在同一个元素上使用 v-model 和 v-on:input 是一个好习惯。我要么只使用 v-model 要么只使用 @input & :value
太棒了，我喜欢结识新朋友。
而且还喜欢Vue专家，我也有5年的Vue经验。所以我们可以经常开会讨论一些代码吗？
在 Vuejs 中，v-model 与 "v-on: input=" & ":value=" 相同，所以从技术上讲，您通过将 v-model 添加到相同的值来使用 v-on:input 两次尝试在我的解决方案中使用 v-on:change，我相信它会起作用。除此之外，如果您有任何其他原因以 v-model 和 v-on:input 的形式使用 v-on:input 两次，请提及

【解决方案2】：

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

【讨论】：

变化和输入一样吗？因为在纯 html 中它不是。
或者我认为您可以将代码更新为第二种情况。
第二个？是一样的。

【解决方案3】：

您的代码很好，我看到的唯一细节是未定义 searchStatus 变量，这可能是您的代码出错了。我在本地测试过，它可以工作

【讨论】：

这是上周回答的，该回答被接受了。