The response vue complex object structure, such as a map object

scenes to be used:

The global data inside vue

progressBarLists: new new the Map (), // real vehicle data array progress bar

Click on the left list

let mapValue = {
        qd: info.qd,
        zd: info.zd,
        pars: 0
      };
      this.progressBarLists.set(info.dlid, mapValue);

socket of watch real vehicle data

carGPSData() {
      if (this.focusGroup) {
        this.carGPSData.forEach(carInfo => {
          const gcj02coord = coordtransform.wgs84togcj02(carInfo.longitude, carInfo.latitude);
          this.gsLine.forEach(item => {
            if (carInfo.dlid == item.dlid) {
              let coods = [];
              let coodsAttr = {
                carNumber: carInfo.cph,
                velocity: carInfo.speed
              };
              coods[0] = gcj02coord[1];
              coods[1] = gcj02coord[0];
              item.value.realTrack(coods, coodsAttr);
              let jdt = item.value.getProgress();
              jdt = parseInt(jdt * 100);
              let mapValue = {
                qd: item.qd,
                zd: item.zd,
                pars: jdt
              };
              this.progressBarLists.set(item.dlid, mapValue);
              this.$forceUpdate();
            }
          });
          this.videoSocket.send(
            JSON.stringify({
              channel: 'BINDRESOURCE',
              dlid: this.focusGroup.dlid,
              lat: gcj02coord[1],
              lon: gcj02coord[0],
              tzid: this.focusGroup.id
            })
          );
        });
      }
    },

View map object layer to traverse

    <div v-if="focusGroup">
      <div v-if="progressBarState">
        <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
          <div class="carController2" :class="{leftController:!groupListStatus}">
            <div v-for="(value,key) in progressBarLists" :key=key>
              <div class="carController2_cont">
                <div class="carController2_cont-w"> {{value[1].qd}}</div>
                <progressBar :carLineLength="value[1].pars" />
                <div class="carController2_cont-w"> {{value[1].zd}}</div>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </div>

Inside the pit,

The first point> .v-for traversing the map does not support the first object, have their own value in a map object to be packaged inside a first array,

Secondly, [0] v-for traversing the object is out of the map key value [1] is the value,

The third point> watch an object inside the map has been changed, vue inside view map object data unchanged, tried various ways to solve, and finally with the watch inside

the this . $ forceUpdate (); solve

Summary: The need to map the object key value store id, value of deposit worth an array of objects, in order to do it, click on List 1, I will generate a list of one-1 data, click on List 2, I will generate a list 2 the correspondence data, and then click on list 1, length this map object will never increase, not as an array of push that,

Only do worthy replacement