Vue中DOM未随更新内容同步问题求助（Event Bus/Vuex均无效）

Hey there, let's troubleshoot why your Vue app's DOM isn't showing updated data even though the console confirms the array has changed. The core issue here ties into how Vue's reactivity system handles array updates, plus a couple of small code fixes needed.

Key Problems in Your Current Code #

1. Direct array index modification isn't reactive: Vue can't detect when you update an array item using this.getServiceInfo[index] = obj — this bypasses Vue's reactivity triggers.
2. Potential reference sharing: When emitting the array via Event Bus, you're passing the same array reference. If the component doesn't detect a change in reference, it might not trigger a re-render.
3. Syntax error in Component 2: Your created hook has an unclosed parenthesis for bus.$on, which might be causing unexpected behavior.

Step-by-Step Fixes #

1. Update Array Items Reactively in Component 1

Replace the direct index assignment with this.$set (Vue's built-in method to trigger reactivity) or Array.splice():

methods: {
  ServiceInfoFun: function(obj){
    var existingIds = this.getServiceInfo.map((obj) => obj.servicename);
    if (!existingIds.includes(obj.servicename)) {
      this.getServiceInfo.push(obj);
      // Emit a copy of the array to ensure reference change
      bus.$emit('extraservice', [...this.getServiceInfo]);
      // this.$store.dispatch('serviceListAction', [...this.getServiceInfo])
    } else {
      this.getServiceInfo.forEach((element, index) => {
        if (element.servicename === obj.servicename) {
          // Use this.$set to trigger reactivity
          this.$set(this.getServiceInfo, index, obj);
          // OR use splice: this.getServiceInfo.splice(index, 1, obj);
          // Emit a copy of the array
          bus.$emit('extraservice', [...this.getServiceInfo]);
          // this.$store.dispatch('serviceListAction', [...this.getServiceInfo]);
        };
      });
    };
  },
  getBedVal: function(name, price){
    var obj = {
      servicename: name,
      serviceprice: price * this.bedroom,
      serviceqty : this.bedroom
    }
    this.ServiceInfoFun(obj);
  },
}

2. Fix Component 2's Event Listener Syntax

Close the bus.$on callback properly, and ensure you're receiving the new array reference:

created(){
  bus.$on('extraservice', (data) => {
    this.serviceInfo = data;
    console.log(this.serviceInfo);
  }); // Added closing parenthesis and semicolon
},

3. Why This Works

• this.$set tells Vue to trigger a reactivity update for the specific array index, so the component knows to re-render.
• Emitting a copy of the array ([...this.getServiceInfo]) creates a new reference, which ensures the receiving component detects the change even if the array contents were modified in place.

For Vuex Users (If You Switch Back) #

If you go back to using Vuex, apply the same principle: always update state arrays reactively. Instead of modifying the array directly, use mutations that either:

• Replace the array with a new copy (e.g., state.serviceList = [...state.serviceList, newItem])
• Use Vue.set or splice for index-based updates

Give these changes a try, and your DOM should now reflect the updated array data!

内容的提问来源于stack exchange，提问作者Vick Sain