There is an array of objects that looks like this:
obj=
[{name: 'joe', job: 'teacher', city: 'miami'},
{name: 'bill', job: 'police', city: 'yorkshire'},
{name: 'sarah', job: 'driver', city: 'michigan'}]
A dropdown menu contains these options:
<select v-model="selected">
<option>blue</option>
<option>green</option>
<option>black</option>
<option>all</option>
</select>
When an option is selected, it corresponds to an object in the array:
if (selected === "blue") {
optionSelected = 'joe'
} else if (selected === "green") {
optionSelected = 'bill'
} else if (selected === "black") {
optionSelected = 'sarah'
} else if (selected === "all") {
// unsure what to do here?
}
The filtering process is done as follows:
obj = obj.filter(object => object.name === optionSelected)
If I select blue, then my obj will be
{name: 'bill', job: 'police', city: 'yorkshire'}all. When all is chosen, the obj should revert back to containing all values, such as:
obj=
[{name: 'joe', job: 'teacher', city: 'miami'},
{name: 'bill', job: 'police', city: 'yorkshire'},
{name: 'sarah', job: 'driver', city: 'michigan'}]
Is there a way to achieve this?
NOTE: The code architecture cannot be altered.