open props in vs-collapse-item tag is being updated but the update doesn't update/re-render the UI in vuesax

Question

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 ?

score 0 · Accepted Answer · answered Aug 15 '22 at 17:36

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
    },

open props in vs-collapse-item tag is being updated but the update doesn't update/re-render the UI in vuesax

1 Answers1