时间戳

首页 > 解决方案 > vuejs事件修饰符搜索列表流程

vue.js - vuejs事件修饰符搜索列表流程

问题描述

我是一个vue js新手，我用搜索输入中输入的值执行get操作，如果有结果，我在“listShow”中显示，如果没有结果，我返回“listShow”false。到目前为止没有问题。只有当用户选择任何传入数据时，我才会将传入数据的“名称”搜索文本发送到输入。但是如果没有结果“listShow false”并单击输入之外的某个地方，我想让“newDiv”为真。所以“inputOutClick”完成了这项工作，但是当我点击任何“搜索”数据时，“inputOutClick”不允许这个“selecteds（）”函数触发。

而且，我的编码风格是否正确，我太重复了。

  1. 可以使用搜索@keyup 吗？
  2. 使用 v-on:focusout 有意义吗？

const app = new Vue({
    el: '#app',
    data: {
        searchText: '',
        listShow: true,
        newDiv:false,
        searcList:[],
    },
   
    methods: {
        inputOutClick() {
            this.listShow = false
        },
        selecteds(list) {
            this.listShow = false;
            this.searchText = list.name;
        },
        
        async search() {
            if (this.searchText !== '') {
                const res = await this.callApi('get', 'search' + '?filter=' + this.searchText)
                if (res.status === 200) {
                    this.searcList = this.getList;
                    if (res.data.length > 0) {
                        this.listShow = true;
                    } else {
                        this.listShow = false;
                    }
                }
            } else {
                this.listShow = false;
            }
        }

    }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
    <div id="app">
        <div>
            <input
                type="text"
                v-model="searchText"
                @keyup="search"
                v-on:focusout="inputOutClick"
                />
            <div v-if="listShow" style="background:red">
                <ul>
                    <li v-for="(list, index) in searcList">
                        <a @click="selecteds(list)">{{ list.name }}</a>
                    </li>
                </ul>
            </div>
           <div v-if="newDiv">
           <p>hello</p>
           </div>
        </div>
    </div>

标签： vue.js

解决方案

您可以@mousedown.prevent在searchList条目（click附加处理程序的位置）上使用。如果单击条目，这可以防止v-on:focusout触发事件。searchList

<input
  type="text"
  v-model="searchText"
  @keyup="search"
  v-on:focusout="inputOutClick"
/>

<a
  @click="selectEntry(entry)"
  @mousedown.prevent
>
  xxx
</a>

推荐阅读