link959 link960 link961 link962 link963 link964 link965 link966 link967 link968 link969 link970 link971 link972 link973 link974 link975 link976 link977 link978 link979 link980 link981 link982 link983 link984 link985 link986 link987 link988 link989 link990 link991 link992 link993 link994 link995 link996 link997 link998 link999 link1000 link1001 link1002 link1003 link1004 link1005 link1006 link1007 link1008 link1009 link1010 link1011 link1012 link1013 link1014 link1015 link1016 link1017 link1018 link1019 link1020 link1021 link1022 link1023 link1024 link1025 link1026 link1027 link1028 link1029 link1030 link1031 link1032 link1033 link1034 link1035 link1036 link1037 link1038 link1039 link1040 link1041 link1042 link1043 link1044 link1045 link1046 link1047 link1048 link1049 link1050 link1051 link1052 link1053 link1054 link1055 link1056 link1057 link1058 link1059 link1060 link1061 link1062 link1063 link1064 link1065 link1066 link1067 link1068 link1069 link1070 link1071 link1072 link1073 link1074 link1075 link1076 link1077 link1078 link1079 link1080 link1081 link1082 link1083 link1084 link1085 link1086 link1087 link1088 link1089 link1090 link1091 link1092 link1093 link1094 link1095

[Vue.js] create global filter functions that all consumes same api and use it in different components VUE.js Subscribe to RSS

when very much confused about this. Trying to create global filter functions that consumes same api and filter it. Really confused how to achieve. To make myself more clear here an example:

with vuex getters when feeding my list and map components in home page.

Code UPDATED

home component:

<template>
<list :cars=”cars” />
<map :cars=”cars” />
<filter-component />
</template>

data(){
return {
keyword: “”
price: “”
};
},
mounted(){
this.$store.dispatch(“loadCars”);
},
computed: {
loadApi(){
return this.$store.getters.loadCars;
},
cars(){
let filter = this.loadApi.filter(textFilter(this.keyword));
return filter;
}
}

Now to filter cars getters. But not the local way. Trying to do globally. So I created mixins/textfilter.js and pricefilter.js and exporting those…

export const textFilter = (text) => (car) => {
if (text > 0) {
if (
car.name.match(text) ||
car.color.match(text)
) {
return true;
} else {
return false;
}
} else {
return true;
}
};

And trying to make event from filter-component to update keyword…

<template>
<input type=”text” name=”” value=””>
</template>

export default {
data(){
return {

};
},
}

Now the problem here. How can I handle event (event-bus or etc) and filter the cars object in home.vue

Solution :

CODESANDBOX example: https://codesandbox.io/s/vue-template-4m9c2

this should work…

import { textFilter } from “../../mixins/textFilter.js”;
import { priceFilter } from “../../mixins/priceFilter.js”;

export default {
computed: {
allCars(){
return this.$store.getters.cars;
},
volvos() {
return this.allCars.filter(textFilter(‘volvo’));
}
}
};

just note that you also have some issues in the text filter.

try this curried function instead

export const textFilter = (text) => (car) => {
if (text.length > 0) {
if (
car.name.match(text) ||
car.color.match(text) ||
car.price.match(text)
) {
return true;
} else {
return false;
}
} else {
return true;
}
};

To make it even more globally accessible and unique, you could move the filter into the vuex getter like this:

// store.js
import { textFilter } from “@/mixins/textFilter.js”;
const store = new Vuex.Store({
state: {
cars: [
{ name: “Volvo s40”, color: ‘…’, price: ‘…’},
{ name: “Volvo v70r”, color: ‘…’, price: ‘…’},
],
textFilterString: ‘volvo’
},
getters: {
filteredCars: state => {
return state.cars.filter(textFilter(state.textFilterString))
}
}
})

this will require additional action and methods to manage the textFilterString variable, but then you can get the filtered list from anywhere without any duplication or recalculation unless the data or the filter string changes.

Solution 2:

I would suggest you to create mixins whenever you want to have some filter which can be easily accessible to any component.

Mixins Learn more about it on Official Docs

You just need to create a mixin say - filtersMixins.js. Then import it to the component.

In the mixin file you can export all the extra vue.js instance properties to the component like methods

In filtersMixins.js

export const myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log(‘hello from mixin!’)
}
}
}

In the component

import { myMixin } from ‘./mixins/filtersMixins’

Now in the inside the instance, call it simply

var app = new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue!’
},
mixins: [myMixin]
})

Now, In the component you can simply use it like a vue.js property by referring this Like methods. You can call mixin methods hello by this.hello()

Pros - You can write common methods in the mixins file and you can have the component binded to the method means you can use the component this to the mixins methods

In case you want to have global method which does not need to be binded to component.

Create it in same file and simply export it

export const globalFilter = str => {
return str.split(‘’)
}

and use it anywhere by

import { globalFilter } from ‘./mixins/filtersMixins’