VueJs 觀察對象的深層變化

Question

我在 VueJS 中有這 3 個組件。 我要解決的問題是：當我點擊vehicle組件時，它需要被選中（ selected = true ）而其他車輛未選中。 我需要為雙向數據綁定做什么？ 因為我在VehiclesList.vue組件中更改了這個selected的屬性，並且它還需要在Monit.vue （它是父級）中進行更改，並且“Vehicle.vue”需要觀察這個屬性的更改類。

更新車輛也有問題。 在Monit.vue ，我不會像this.vehicles = response.vehicles那樣更新完整的對象，但我會逐個進行，並且只更改monit屬性。

也許更容易為此使用商店。 但我想在組件中做到這一點。

編輯：數據結構

 {
   "m":[
      {
         "id":"v19",
         "regno":"ATECH DOBLO",
         "dt":"2017-10-09 13:19:01",
         "lon":17.96442604,
         "lat":50.66988373,
         "v":0,
         "th":0,
         "r":0,
         "g":28,
         "s":"3",
         "pow":1
      },
      {
         "id":"v20",
         "regno":"ATECH DUCATO_2",
         "dt":"2017-10-10 01:00:03",
         "lon":17.96442604,
         "lat":50.6698494,
         "v":0,
         "th":0,
         "r":0,
         "g":20,
         "s":"3"
      },
   ]
}

監視器

<template>
  <div class="module-container">
      <div class="module-container-widgets">
        <vehicles-list :vehicles="vehicles"></vehicles-list>
      </div>
  </div>
</template>
<script>
import VehiclesList from '@/components/modules/monit/VehiclesList.vue';

export default {
  name: "Monit",
  data (){
      return {
          vehicles: null
      }
  },
  components: {
    VehiclesList
  },

  methods: {
    getMonitData(opt){
        let self = this;

        if (this.getMonitDataTimer) clearTimeout(this.getMonitDataTimer);

        this.axios({
            url:'/monit',
          })
          .then(res => {
                let data = res.data;
                console.log(data);
                if (!data.err){
                    self.updateVehicles(data.m);
                }

                self.getMonitDataTimer = setTimeout(()=>{
                    self.getMonitData();
                }, self.getMonitDataDelay);

              })
          .catch(error => {

          })
    },
    updateVehicles(data){
        let self = this;
        if (!this.vehicles){
            this.vehicles = {};
            data.forEach((v,id) => {
                self.vehicles[v.id] = {
                    monit: v,
                    no: Object.keys(self.vehicles).length + 1
                }
            });
        } else {
            data.forEach((v,id) => {
                if (self.vehicles[v.id]) {
                    self.vehicles[v.id].monit = v;
                } else {
                    self.vehicles[v.id] = {
                        monit: v,
                        no: Object.keys(self.vehicles).length + 1
                    }
                }
            });
        }
    },
  },
  mounted: function(){
     this.getMonitData();
  }
};
</script>

車輛列表.vue

<template>
  <div class="vehicles-list" :class="{'vehicles-list--short': isShort}">
      <ul>
          <vehicle 
                v-for="v in vehicles" 
                :key="v.id" 
                :data="v"
                @click.native="select(v)"
          ></vehicle>
      </ul>
  </div>
</template>
<script>
import Vehicle from '@/components/modules/monit/VehiclesListItem.vue';

export default {
    data: function(){
        return {
            isShort: true
        }
    }, 
    props:{
        vehicles: {}
    },
    methods:{
        select(vehicle){
            let id = vehicle.monit.id;
            console.log("Select vehicle: " + id);
            _.forEach((v, id) => {
                v.selected = false;
            });
            this.vehicles[id].selected = true;
        }
    },
    components:{
        Vehicle
    }
}
</script>

車輛.vue

<template>
  <li class="vehicle" :id="data.id" :class="classes">
      <div class="vehicle-info">
        <div class="vehicle-info--regno font-weight-bold"><span class="vehicle-info--no">{{data.no}}.</span> {{ data.monit.regno }}</div>
      </div>
      <div class="vehicle-stats">
          <div v-if="data.monit.v !== 'undefined'" class="vehicle-stat--speed" data-name="speed"><i class="mdi mdi-speedometer"></i>{{ data.monit.v }} km/h</div>
      </div>

  </li>
</template>
<script>
export default {
    props:{
        data: Object
    },
    computed:{
        classes (){
           return {
               'vehicle--selected': this.data.selected
           }
        }
    }
}
</script>

Answer 1

在 VueJS 2.0 中不推薦使用雙向組件數據綁定，以獲得更多事件驅動的模型：https ://v2.vuejs.org/v2/guide/components.html#One-Way-Data-Flow

這意味着，在父組件中所做的更改仍會傳播到子組件（單向）。 您在子組件中所做的更改需要通過自定義事件顯式發送回父組件： https ://v2.vuejs.org/v2/guide/components.html#Custom-Events 或 2.3.0+ 中的sync關鍵字： https ://v2.vuejs.org/v2/guide/components.html#sync-Modifier

編輯替代（也許更好）方法：

監控.vue：

<template>
  <div class="module-container">
      <div class="module-container-widgets">
        <vehicles-list :vehicles="vehicles" v-on:vehicleSelected="onVehicleSelected"></vehicles-list>
      </div>
  </div>
</template>
<script>
import VehiclesList from '@/components/modules/monit/VehiclesList.vue';

export default {
  name: "Monit",
  data (){
      return {
          vehicles: null
      }
  },
  components: {
    VehiclesList
  },

  methods: {
      onVehicleSelected: function (id) {
          _.forEach((v, id) => {
              v.selected = false;
          });
          this.vehicles[id].selected = true;
      }
      ...other methods
  },
  mounted: function(){
     this.getMonitData();
  }
};
</script>

車輛列表.vue：

methods:{
    select(vehicle){
        this.$emit('vehicleSelected', vehicle.monit.id)
    }
},

原始帖子：對於您的示例，這可能意味着您需要在 select 方法中發出更改，並且您需要在VehicleList.vue中使用某種可變對象：

export default {
    data: function(){
        return {
            isShort: true,
            mutableVehicles: {}
        }
    }, 
    props:{
        vehicles: {}
    },
    methods:{
        select(vehicle){
            let id = vehicle.monit.id;
            console.log("Select vehicle: " + id);
            _.forEach((v, id) => {
                v.selected = false;
            });
            this.mutableVehicles[id].selected = true;
            this.$emit('update:vehicles', this.mutableVehicles);
        },
        vehilcesLoaded () {
            // Call this function from the parent once the data was loaded from the api. 
            // This ensures that we don't overwrite the child data with data from the parent when something changes.
            // But still have the up-to-date data from the api
            this.mutableVehilces = this.vehicles
        }
    },
    components:{
        Vehicle
    }
}

監視器

<template>
  <div class="module-container">
      <div class="module-container-widgets">
        <vehicles-list :vehicles.sync="vehicles"></vehicles-list>
      </div>
  </div>
</template>
<script>

您仍然應該更多地考慮責任。 VehicleList.vue 組件不應該負責加載和管理車輛嗎？ 這可能會使思考變得容易一些。

編輯 2：嘗試$set內部對象，看看這是否有幫助：

self.$set(self.vehicles, v.id, {
    monit: v,
    no: Object.keys(self.vehicles).length + 1,
    selected: false
});