vuejs事件修饰符搜索列表流程答案

【问题标题】：vuejs event modifier search list processvuejs事件修饰符搜索列表流程
【发布时间】：2021-09-10 04:32:58
【问题描述】：

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

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

可以使用搜索@keyup 吗？
使用 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>

【问题讨论】：

一个想法，也许返回的这个数据不是假的，而是一个空对象，或者数组，取决于你有什么。 res.data.length 可能不为零，但对象中的数据为零。从 API 或 Postman 中看到的行为是什么
请不要处理axios数据，那不是我想做的，get出来的数据没有问题，listing没有问题。如果你读得好。
也许这会有所帮助：v-on:blurstackoverflow.com/a/52070811/13604954
不，这不是我想要的
可能在输入时效果不佳。我找到了这个链接。 codepen.io/autumnwoodberry/pen/NvjJWm

标签： vue.js

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

使用@mousedown 代替@click。

=> @click 在 @focusout 之后运行。

=> @mousedown 在@focusout 之前运行。

如果您不想在单击列表时在输入字段上运行focusout 函数，那么您可以使用@mousedown.prevent="selecteds(list)"。

请参见下面的示例（单击“整页”以便 console.log 不会阻止列表）：

const app = new Vue({
    el: '#app',
    data: {
        searchText: '',
        listShow: true,
        newDiv:false,
        searcList:[],
        list: {}
    },
   
    methods: {
        inputOutClick() {
        console.log("inputOutClick");
          if (this.listShow == false) {
            console.log("mousedown was fired first");
          }
          this.listShow = false
        },
        selecteds(list) {
        console.log("selecteds");
            this.listShow = false;
            this.searchText = list.name;
        },
        
        async search() {
        console.log("search");
            this.listShow = true;
            this.searcList = ['aeaeg', 'tdthtdht', 'srgsr'];
            this.list.name = "TEST"
        }

    }

});

<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 @mousedown="selecteds(list)">LIST TEXT</a>
                    </li>
                </ul>
            </div>
           <div v-if="newDiv">
           <p>hello</p>
           </div>
        </div>
    </div>

【讨论】：