Code in template Tag
<vs-collapse class="p-0">
<vs-collapse-item :open="showAllTriggerRequirements" class="content-collapse p-0 item-header">
<EntryExitConditons
v-if="alert.trigger_requirements && alert.trigger_requirements.length > 0"
:conditions="alert.trigger_requirements"
:size="'xs'"
></EntryExitConditons>
</vs-collapse-item>
</vs-collapse>
Code in Script Tag
watch: {
showTriggerRequirements(value) {
console.log("////////////////showTriggerRequirements",value);
},
selectedfilterName(value) {
if (value === "Display Trigger Requirements") {
console.log("////////////////trigger requirementVLAUEEEE",value);
this.showTriggerRequirements = true;
} else if (value === "Hide Trigger Requirements") {
this.showTriggerRequirements = false;
}
},
},
computed: {
showAllTriggerRequirements() {
return this.showTriggerRequirements
},
}
I am using the selectedfilterName state to toggle my showTriggerRequirements state. The showTriggerRequirements state is getting updated (I have watched its value). I have inspected the vs-collapse-item tag and it's open prop's value is getting updated but the change is not being reflected in the UI, when the open prop value in the vs-collapse-item tag changes, the UI does not get updated. How can I update my UI, Isn't Vue responsible for updating the UI when a reactive state changes ?
I was rendering this vs-collapse component in a for Loop without using the key prop. Vue uses the Key prop to detect reactivity and updates the UI. I created a method to create a forceful rerender to update the UI.
<vs-collapse :key="componentKey" class="p-0">
<vs-collapse-item :open="showAllTriggerRequirements" class="content-collapse p-0 item-header">
<EntryExitConditons
v-if="alert.trigger_requirements && alert.trigger_requirements.length > 0"
:conditions="alert.trigger_requirements"
:size="'xs'"
></EntryExitConditons>
</vs-collapse-item>
</vs-collapse>
In my methods section, I create this following method :-
forceRerender() {
this.componentKey += 1;
}
Here, this.componentKey is a state that I created in the data() method (I am using the options API/Vue@2).
I use the above method in the computed property to cause a rerender :-
showAllTriggerRequirements() {
this.forceRerender();
return this.showTriggerRequirements
},