时间戳

首页 > 解决方案 > 在运行该功能之前，我必须检查一个复选框两次。Vuejs

laravel - 在运行该功能之前，我必须检查一个复选框两次。Vuejs

问题描述

我想在每次输入字段更改时运行一个函数，它适用于文本和电子邮件输入字段，但不适用于复选框？

这些是 HTML 标签，当我更改文本输入字段或电子邮件输入字段时，该功能运行正常。但是，当我选中该框时，我必须单击它两次才能生效，第一次单击保持show_pendingfalse。

        <input type="text" v-model="search.name" @input="getBusinessUsers()" placeholder="Search by name" class="form-control">
        <input type="email" v-model="search.email" @input="getBusinessUsers()" placeholder="Search by email" class="form-control">
        <input class="form-check-input" type="checkbox" id="checkbox" v-model="search.show_pending" @input="getBusinessUsers()">
        <label class="form-check-label" for="checkbox">Show pending users</label>

这是数据模型：

    data() {
        return {
            users: [],
            search: {
                name: null,
                email: null,
                show_pending: false,
            },
        }
    },


        <input class="form-check-input" type="checkbox" id="checkbox" v-model="search.show_pending" @input="getBusinessUsers()">
        <label class="form-check-label" for="checkbox">Show pending users</label>

这是我要运行的功能：

        getBusinessUsers(){
            this.users = [];
            let component = this;

            let pageNum = this.pageNum;
            let search = this.search


            var endpoint = '/businesses?page='+pageNum;


            Object.keys(search).forEach((key) => (search[key] == null) && delete search[key]);//remove empty params

            Object.keys(search).forEach(function(item) {
                console.log(item, search[item]);
                endpoint += "&" + item + "=" + search[item];
            });//append non empty params to endpoint to fetch all users
            console.log(endpoint);

            this.$http.get(endpoint).then(response => {
                console.log(response.data);
                let pagination = response.data.meta.pagination;

                this.pageCount = pagination.total_pages;
                response.data.data.forEach(function (user) {
                    user.edit = false;
                    component.users.push(user);
                })
            }).catch(function (error) {
                console.log(error);
            });
        },

标签： laravelvue.jsvuejs2

解决方案

我所需要的只是使用@change而不是@input. 所以这：

<input class="form-check-input" type="checkbox" id="checkbox" v-model="search.show_pending" @change="getBusinessUsers()">

代替：

<input class="form-check-input" type="checkbox" id="checkbox" v-model="search.show_pending" @input="getBusinessUsers()">

推荐阅读