While filtering data from the store, I need to check whether 'name' field of the data is 'stackoverflow'. So I use:
data() {
myname: 'stackoverflow'
},
computed: {
user() {
return this.$store.getters['entities/users/query']().where('name', myname).first();
}
}
It works perfectly if the name is given as 'stackoverflow', but not for 'StackOverflow'. Can the 'where' clause be modified so that it checks case insensitive?
I have never used the vuex-orm but i think this should work, according to the docs
https://vuex-orm.github.io/vuex-orm/guide/store/retrieving-data.html#simple-where-clauses
computed: {
user() {
return this.$store.getters['entities/users/query']().where(user => user.name.toUpperCase() === this.myname.toUpperCase()).first();
}
}
Or even
computed: {
user() {
return this.$store.getters['entities/users/query']().where('name', value => value.toUpperCase() === this.myname.toUpperCase()).first();
}
}
Related
Look at the image below and please explain where should I use computed instead of methods and vice versa? It confuses me.
As a rule of thumb: a computed is a simple getter (though they can be setters, but that's not something you'd typically use) that is dependent on one or more properties. It'll update automatically when those properties change. You cannot pass it parameters. You would use a method when you need to pass a parameter and/or need to perform an action or mutation.
data() {
firstName: 'Bert',
lastName: 'Ernie'
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
}
}
This will return "Bert Ernie" and will update automatically when either firstName or lastName change.
Now if you need to change something, or for example select something from a list using a parameter, you would use a method.
data() {
users: [
{ id: 1, name: 'Bert' }.
{ id: 2, name: 'Ernie' }
]
},
methods: {
getUser(userid) {
return this.users.find(user => user.id === userid);
},
setUserName(userid, newName) {
const user = this.users.find(user => user.id === userid);
if (user) {
user.name = newName;
}
}
}
In a SFC I have
filters: {
localizedData: function () {
return new Date(value).toLocaleString();
}
}
and
computed: {
todos() {
return _.map(this.raw_todos, item => {
return {
...item.node,
localizedData: this.$filters.localizedData(item.node.giorno)
}
});
}
},
The part not working is
this.$filters
because it's undefined. this is the Vue instance, but it has not the $filters... also I tried
this.localizeData(..)
but .localizeData is not a function
What am I doing wrong and why?
Just like #Eric Guan said, filter is in this.$options.filters
You can refer to this https://stackblitz.com/edit/js-vue-filter-in-vm-instance
I have the following computed property :
new Vue({
el: '#app',
data() {
return {
search : '',
users : [{name : "John Doe", email : "xerox#hotmail.us"}, {name : "Jane Doe"}],
}
},
computed : {
filteredUsers() {
if (!this.search) return this.users
var find = function(object, search) {
for (var property in object) {
if (object.hasOwnProperty(property)) {
if (typeof object[property] == "object"){
find(object[property]);
} else if (object[property].includes !== undefined){
if (object[property].includes(search)) return true;
}
}
}
return false;
}
return this.users.filter(user => {
return find(user, this.search)
})
}
}
})
What can I do to order this ones by their name?
I do some filtering now in a computed property, but before I didn't do that and just used this function to do the ordering:
orderedList() {
return _.orderBy(this.users, 'name')
},
How can I combine the two functions or add the orderBy part to the filteredUsers function?
#boussadjira's answer is fine, but if you really don't want the extra function, just use the following as the return from filteredUsers()
return _.orderBy(
this.users.filter(user => find(user, this.search)),
'name'
);
(and similarly in the short-circuit return when search is empty)
Using linq js lib.
computed: {
filteredUsers {
return Enumerable.From(this.users).OrderBy(x => x.name).ToArray();
}
}
I use simply computed to get correct values from my array to select field:
computed: {
specialitySelect() {
return this.$store.state.physicianListSpeciality
}
}
this works fine, but I need to get proper values depend on offer.person value, which could be: physician, nurse etc...
How can I change return value to be: in case of nurse:
computed: {
specialitySelect() {
return this.$store.state.nurseListSpeciality
}
}
If this would be a function I could easily do:
methods: {
specialitySelect(person) {
return this.$store.state[person]ListSpeciality
}
}
but in computed I cannot do it. Is there any other solution that I could use instead?
One solution would be to check the value of offer.person and depend on that return what you want to return:
computed: {
specialitySelect() {
switch(this.offer.person) {
case 'nurse':
return this.$store.state.nurseListSpeciality
break
case 'physician':
return this.$store.state.physicianListSpeciality
break
default:
return []
}
return this.$store.state.nurseListSpeciality
}
}
Note: Thanks to a comment in this answer a great solution would be:
computed:{
specialitySelect() {
return this.$store.state[this.offer.person + 'ListSpeciality']
}
}
How one can do custom two-way filter for model, updating on the fly in Vue.js.
The following code example from docs works on input blur. But I need it work on keypress.
Vue.filter('currencyDisplay', {
read: function(val) {
return '$'+val.toFixed(2)
},
write: function(val, oldVal) {
var number = +val.replace(/[^\d.]/g, '')
return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
}
})
Many thanks in advance for any help!
You can apply a filter to a Vue data property by creating a computed property with a get and set method that fire the read and write methods of the filter, respectively:
data() {
return {
foo: 0,
}
},
computed: {
filteredFoo: {
get() {
return Vue.filter('currencyDisplay').read(this.foo);
},
set(value) {
this.foo = Vue.filter('currencyDisplay').write(value);
}
}
}
Here's a working fiddle.