I have an array object, and i want to filter that array. I already know how to filter data by single value using computed property,
computed: {
filteredValue() {
return this.graphData.filter(data => data.YEAR === this.selectedYears)
}
},
But i want to filter data by multiple value/array. Suppose i have an array object that has Year: 1901-2000. and i only want to filter only those year which are selected (like 1901, 1902, 1903). Can anyone help me with that.
TIA
I think you need to maintain an array of selectedYears.Then,use use it like this.
computed: {
filteredValue() {
return this.graphData.filter(data => this.selectedYears.includes(data.YEAR);
}
}
Related
I'm trying to display the number of options next to each item in a select drop-down menu. Like in the example.
My data is pulled from a JSON using AXIOS. Here is one line from an object in my array
"Data": {
"K": "Part Time, Full-time",
},
and the computed property which I'm attempting to create. It brings back a number but not the ones I would like. Can anyone help me out with this, please?
computed: {
feeCount() {
const feeResults = this.results.filter(
(result) => result.Data && result.Data.K
);
return feeResults.length;
},
}
Your problem is that "Part Time, Full-time" is a string, not an array, so you're getting the length of the string instead.
You can use result.Data.K.split(',') to generate an array then count the length from that.
I am trying to update an array inside of my array (nested array) with react-redux. I found a solution to how to do this but is there any easier way of doing this rather than passing multiple parameter to the action.
[types.HISTORY_UPDATE](state, action){
return {
...state,
budgets: [
...state.budgets.slice(0,action.id),
{
key: action.key,
id: action.idd,
name: action.name,
budgetType: action.budgetType,
startDate: action.startDate,
currency: action.currency,
amount: action.amount,
amountLeft: action.amountLeft,
rollOver: action.rollOver,
color: action.color,
iconName: action.iconName,
history: [
...state.budgets[action.id].history.slice(0,action.histId),
{
note: action.note,
amount: action.amount,
type: action.type,
date: action.date,
fullDate: action.fullDate,
hours: action.hours,
min: action.min,
month: action.month,
year: action.year
},
...state.budgets[action.id].history.slice(action.histId+1)
]
},
...state.budgets.slice(action.id+1)
]
}
},
and the action goes like this
export function updateHistory(id,key,idd,name,budgetType,startDate,currency,amount,amountLeft,rollOver,color,iconName,histId,........){
I don't want to spend time with passing multiple parameter like this while using react-redux and also while I tried to run my application on my phone sometimes it really slows the application. Is it because of the example above?
I would be really appreciated If you guys come up with a solution.
I typically do not store arrays in redux, since updating a single element really is a burden as you noticed. If the objects you have inside your array all have a unique id, you can easily convert that array to an object of objects. As key for each object you take that id.
const convertToObject = (array) => {
let items = {};
array.map((item) => {
items[item.id] = item;
});
return items;
};
In your action you simply just pass the item you want to update as payload, and you can update the redux store very easily. In this example below I am just updating the budgets object, but the same logic applies when you assign a history object to each budget.
[types.BUDGET_UPDATE](state, action){
const item = action.payload;
return {
...state,
budgets: {
...state.budgets,
[item.id]: item
}
}
}
And if you want an array somewhere in your component code, you just convert the redux store object back to an array:
const array = Object.values(someReduxStoreObject);
I am creating a multiple-v-select for users, so they can select multiple options. A computed property filters this selection. I cannot get this to work with multiple options.
Removing the multiple setting from v-select works, but that means that users can only select one option, while they should be able to select more than one.
<template>
<v-select
v-model="selectofficeperks"
:items="officeperks"
multiple />
</template>
<script>
export default {
data () {
return {
officeperks: ['Tafeltennis','Tafelvoetbal', 'Pooltafel']
selectofficeperks:[],
jobs:[],
jobofficeperks:'',
}
},
computed: {
filtered() {
return this.jobs.filter(result => {
let officeperks = this.selectofficeperks;
if (officeperks != '') {
return (officeperks.includes(result.jobofficeperks))
}
}
}
}
}
</script>
When selecting multiple options it does not give a result from the computed filter. The jobs array gets filled by data from Firestore, the values are exactly the same.
If I remove the multiple setting, it does return a value, but I'm guessing that's because it only tries to find one value, which is not what I want. Users have to be able to select multiple values.
Okay, so I have an input field with below code and wanting use decimals to look like 10,000 for 100000.
input#payment.form-control(type='number'
v-model='payment')
Payment for v-model is coming from computed data using mixin and updates new value using methods.
computed:{
get () { return this.NameOfMixin.payment },
set (value) {this.updateStore('payment', value)}
},
methods: {
updateStore(field, value) {
...
}
}
All the code above are working fine except now I want to display decimals and use a plain number for updating the store.
I have tried using creating methods to convert the value to decimals and v-money but nothing worked as I wished.
I am a newbie to react-native, redux and saga and have run into a use case that I have not been able to find a solution for. I understand how to map state to properties and pass around the state between action, reducer and saga. This makes sense to me so far. This is where things seem to get dicey. I have a form that requires a variable number of form fields at any given time depending upon what is returned from the database.
As an example, let's say I have a structure like this:
{
name: ‘’,
vehicleMake: ‘’,
vehicleModel: ‘’,
carLotCity: ‘’,
carLotState: ‘’,
carLotZipCode: ‘’,
localPartsManufacturers: [{name: ‘’, address: ‘’, zipCode}]
}
Everything from name to carLotZipCode would only require one text field, however, the localPartsManufacturers array could represent any number of object that each would need their own set of text fields per each object. How would I account for this with redux as far as mapping the fields to the state and mapping the state to the properties? I am confused about how to begin with this scenario. I understand how to project mapping when the fields are fixed.
I would keep the data as it is coming from the backend. That way you'll avoid normalizing it. I think we just have to be smarter when rendering the fields. Here's what I'm suggesting:
function onTextFieldChange(name, index) {
// either name = `name`, `vehicleMake`, ...
// or
// name = `localPartsManufacturers` and `index` = 0
}
function createTextField(name, index) {
return <input
type='text'
name={ name }
onChange={ () => onTextFieldChange(name, index) } />;
}
function Form({ fields }) {
return (
<div>
{
Object.keys(fields).reduce((allFields, fieldName) => {
const field = fields[fieldName];
if (Array.isArray(field)) {
allFields = allFields.concat(field.map(createTextField));
} else {
allFields.push(createTextField(fieldName));
}
return allFields;
}, [])
}
</div>
);
}
Form receives all the data as you have it in the store. Then we check if the field is an array. If it is an array we loop over the fields inside and generate inputs same as the other properties createTextField. The tricky part here is how to update the data in the store. Notice that we are passing an index when the text field data is changed. In the reducer we have to write something like:
case FIELD_UPDATED:
const { name, index, value } = event.payload;
if (typeof index !== 'undefined') {
state[name][index] = value;
} else {
state[name] = value;
}
return state;
There is nothing preventing you from keeping a list, map, set or any other object in Redux.
The only thing remaining then, is how you map the state to your props, and how you use them. Instead of mapping a single element from the collection to a prop, you map the entire collection to a single prop, and then iterate over the collection in your render method.
In the action you can pass a new collection back, which is comprised of the form fields making up the parts list. Then, your reducer will replace the collection itself.
Or, upon changing an element in the part collection, you can send an action with its id, find it in the collection in the reducer and replace the element that was changed / add the new one / remove the deleted one.