Search code examples
javascriptarraysvuejs2vuexdom-events

DOM is not updating with updated content in Vue

I am a creating an application in Vue. I am getting an issue on showing the updating content, coming through the event bus. I also tried to use vuex for local content but it is still showing same issue.

Content is in Array format having some objects, creating through some form inputs.

Console is showing the updated content but Updated content is not showing on DOM.

Let me add some screenshots.

enter image description here

enter image description here

Can anyone help me??

Let me add some code using in my project. I am using Vue Materail in code.

Template 1

<md-select v-model="bedroom" name="bedroom" id="bedroom" @md-selected="getBedVal('bedroom', 10)">
                            <md-option value="1">1</md-option>
                            <md-option value="2">2</md-option>
                            <md-option value="3">3</md-option>
                            <md-option value="4">4</md-option>
                            <md-option value="5">5</md-option>
                            <md-option value="6">6</md-option>
                            <md-option value="7">7</md-option>
                            <md-option value="8">8</md-option>
                            <md-option value="9">9</md-option>
                            <md-option value="10">10</md-option>

                        </md-select>

Component 1:-

methods: {
    ServiceInfoFun: function(obj){
      var existingIds = this.getServiceInfo.map((obj) => obj.servicename);
      if (!existingIds.includes(obj.servicename)) {
        this.getServiceInfo.push(obj);
          bus.$emit('extraservice', this.getServiceInfo);
          //this.$store.dispatch('serviceListAction', this.getServiceInfo)
      } else {
        this.getServiceInfo.forEach((element, index) => {
          if (element.servicename === obj.servicename) {
              this.getServiceInfo[index] = obj;
              // this.$store.dispatch('serviceListAction', this.getServiceInfo); 
              bus.$emit('extraservice', this.getServiceInfo);
          };
        });
      };
    },
    getBedVal: function(name, price){ 
      var obj = {
        servicename: name,
        serviceprice: price * this.bedroom,
        serviceqty : this.bedroom
      }
       this.ServiceInfoFun(obj);
    },
  }

Template 2

{{ serviceInfo }}

Component 2:

  created(){
    bus.$on('extraservice', (data) => {
        this.serviceInfo = data;
        console.log(this.serviceInfo);
  },

Thanks in advance.

Solution

  • Most likely your data is loaded after the DOM is loaded, since it is nested it won't be reactive so you can't expect it to update.

    You have a few options:

    1) put a v-if somewhere which prevents the DOM from loading before your data is in place.

    2) Manually force a reload, my preferred method is by giving a key and changing the key. See here for a detailed example: https://michaelnthiessen.com/force-re-render/

    NOTE: Just to elaborate, if you are getting your data in PROPS then it comes fairly early otoh if is in some lifecycle say "created" then the DOM will be loading first for sure.