VueJS - The select list is not updated after a data change - vue.js

Question

I'm starting to use Vuejs and I'm having difficulty to do something that I think simple.
To summarize, I have a list of filters that contains all the information about the filters (name, items available for selection, witch item selected and if the filter is selected).
In my page, I have a table that lists all the filters selected and drop-down list with the rest of filters not selected.
To be clean, I have two methods in the computed section:
filtersSelected (return all the filter with "isSelected" is true)
filtersNoSelected (return all the filter with "isSelected" is false)
Vue.component('filter-item', {
props: ['filter'],
template:
'<tr>' +
'<th scope="row">{{ filter.id }}</th>' +
'<td>' +
'{{ filter.name }}' +
'</td>' +
'<td>' +
'<button type="button" class="btn btn-sm btn-info">></button>' +
'</td>' +
'<td>' +
'<button type="button" class="btn btn-sm btn-danger" v-on:click="$emit(\'remove\', filter)">X</button>' +
'</td>' +
'</tr>'
})
Vue.component('filter-panel', {
props: ['allfilters'],
data: function () {
return {
filters: this.allfilters
}
},
methods: {
removeFilter: function (filter) {
filter.isSelected = false;
}
},
template:
'<table class="table table-sm">' +
'<thead>' +
'<tr>' +
'<th scope="col">#</th>' +
'<th scope="col">Name</th>' +
'<th scope="col">Update</th>' +
'<th scope="col">Delete</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'<filter-item v-for="filter in filters" v-bind:key="filter.id" v-bind:filter="filter" #remove="removeFilter">' +
'</filter-item>' +
'</tbody>' +
'</table>'
})
Vue.component('filter-select', {
props: ['allfilters'],
data: function () {
return {
selectedItem: 0,
filters: this.allfilters
}
},
methods: {
},
template:
'<div><select class="selectpicker" data-live-search="true" v-model="selectedItem" v-on:change="$emit(\'selected\', selectedItem)"> ' +
'<option disabled value="0" selected>Select</option>' +
'<option v-for="filter in filters" v-bind:key="filter.id" v-bind:value="filter.id">{{ filter.name }}' +
'</option>' +
'</select>' +
'<span>{{selectedItem}}</span></div>'
})
var app = new Vue({
el: '#app',
data: {
filters:
[
{
id: 1,
name: "Country",
type: "List",
isSelected: false,
listItem: [
{
value: "1",
text: "France"
},
{
value: "2",
text: "United States"
},
{
value: "3",
text: "China"
}
],
selectedItem: ["1", "3"]
},
{
id: 2,
name: "Product category",
type: "List",
isSelected: false,
listItem: [
{
value: "1",
text: "Food"
},
{
value: "2",
text: "Drink"
},
{
value: "3",
text: "Home"
}
],
selectedItem: ["1"]
}
],
filterSelected: 2
},
methods:
{
AddFilter: function (filterId) {
var filter = this.filters.find(function (f) { return f.id === filterId });
filter.isSelected = true;
$('#FilterModal').modal('hide');
}
},
computed:
{
filtersSelected: function () {
var list = this.filters.filter(function (f) { return f.isSelected });
return list;
},
filtersNoSelected: function () {
var list = this.filters.filter(function (f) { return !f.isSelected });
return list;
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<filter-panel v-bind:allfilters="filtersSelected"></filter-panel>
<filter-select v-bind:allfilters="filtersNoSelected" v-on:selected="filterSelected = $event"></filter-select>
<button type="button" class="btn btn-primary" v-on:click="AddFilter(filterSelected)">Add the filter</button>
So the logic is simple, when we select a filter and click on the add button, the method will put "isSelected" to true. If we click on delete, the method will put "isSelected" to false. And after, the computed methods will share to my components the filtered list. But it's doesn't work.
I checked the logic step by step in the browser, we pass by the computed methods, the computed methods send a different list each time, but i have no change in my page.
I tried another solution, share all the list to my components and add "v-if" or "v-show" on and but it worked only for the table, not for the drop-down list. beside, I don't like this solution.
With all the posts I read on this forum, I have not found a solution to my problem.
(use key in v-for or use reactivity)
Because I'm in the learning phase, I want to know what is the good way to do it. I want to use the best practice !
Thank you in advance for your helps !

Answer 1

I have ran into similar type of issue. This may be helpful in your case also. When you use arrays or objects in data and if you change the data inside that array/object then Vue cannot recognise it.
Vue can identify if you push some data in the array and re-render the component, but it cannot do that if some nested data changes.
We use lodash.cloneDeep() in our project to overcome this issue.
The mutations should be performed on new copy, can you try something like this:
AddFilter: function (filterId) {
var index = this.filters.findIndex(function (f) { return f.id === filterId });
let newFilters = _.cloneDeep(this.filters);
newFilters[index].isSelected = true;
this.filters = newFilters;
$('#FilterModal').modal('hide');
}
This concept is similar to state in react, that you should not mutate
the state directly(its similar not exactly the same)
You can read about it in Official docs, which suggests that
The object must be plain