I have a BootstrapVue table with the following code in a single HTML file;
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div id="app" >
<b-form-checkbox id="checkbox-filter" v-model="enable_filter" name="checkbox-filter" value="enabled"
unchecked-value="not_enabled">
Filter
</b-form-checkbox>
<b-input v-model="filter" placeholder="Filter table..."></b-input>
<hr />
<b-table :items="items" :filter="filter" :filter-function="filterFn">
</b-table>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
filter: "",
enable_filter: "enabled",
items: [
{ id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 },
{ id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 },
{ id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 },
{ id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 },
{ id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 }
]
}
},
methods: {
normalizeString(s) {
return `${s}`.trim().toLowerCase();
},
filterFn(row) {
console.log("filterFn()");
let filtered_result = true;
if (this.enable_filter === "enabled") {
filtered_result = this.filter.split(',')
.map(this.normalizeString)
.some(
term => Object.values(row)
.map(this.normalizeString)
.some(
val => val.indexOf(term) > -1
)
);
}
return filtered_result;
},
test_func()
{
console("test_func()");
},
},
watch: {
enable_filter()
{
console.log("watch checkbox filter");
this.test_func();
this.filterFn();
},
},
})
</script>
When the Search
checkbox is clicked, enable_filter()
inside watch
will be run. Question is how do I call other methods such as test_func()
and filterFn(row)
inside enable_filter()
? I did try calling the methods but I cannot see the output from console.log(). Did I do it correctly?
I am using BootstrapVue and vue.js v2.6
CodePudding user response:
Check following snippet pls (you can check if filter is enabled and is it empty):)
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div id="app" >
<b-form-checkbox id="checkbox-filter" v-model="enable_filter" name="checkbox-filter" value="enabled"
unchecked-value="not_enabled">
Filter
</b-form-checkbox>
<b-input v-model="filter" placeholder="Filter table..."></b-input>
<hr />
<b-table :items="items" :filter="filter" :filter-function="filterFn">
</b-table>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
filter: "",
enable_filter: "enabled",
items: [
{ id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 },
{ id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 },
{ id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 },
{ id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 },
{ id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 }
]
}
},
methods: {
normalizeString(s) {
return `${s}`.trim().toLowerCase();
},
filterFn(row) {
if (this.enable_filter === "enabled") {
console.log("filterFn()", this.enable_filter);
let filtered_result = true;
if (this.enable_filter === "enabled" && this.filter) {
filtered_result = this.filter.split(',')
.map(this.normalizeString)
.some(
term => Object.values(row)
.map(this.normalizeString)
.some(
val => val.indexOf(term) > -1
)
);
}
return filtered_result;
}
},
test_func()
{
console.log("test_func()");
},
},
watch: {
enable_filter()
{
console.log("watch checkbox filter");
this.test_func();
this.filterFn();
},
},
})
</script>
CodePudding user response:
Your method should be getting called. Read the error message you're getting. It probably says something like
TypeError: console is not a function
Because console
is not a function
test_func()
{
console("test_func()");
},
You probably want console.log