Multi tool use

Clash Royale CLAN TAG

I have to check a checkbox twice before it runs the function. Vuejs

I want to run a function every time an input field changes, it works for a text and email input fields but not for checkbox?

These are the HTML tags, when I change the text input field or the email input field, the function runs okay.. However, when I check the box I have to click it twice before it takes effect, the first click keeps the show_pending false.

show_pending

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


This is the data model:

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>


And this is the function I'm trying to run:

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);
});
},


1 Answer
1

All I needed is use the @change instead of @input. So this:

@change

@input

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


instead of:

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


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.