Смотря реквизит, передаваемый изнутри ребенку - PullRequest
Новая
       4

Смотря реквизит, передаваемый изнутри ребенку

0 голосов
/ 30 ноября 2018

Я не могу разобраться с механизмом наблюдения в Vue.

У меня есть родительский компонент, который передает объект Vehicle дочернему компоненту.

Vehicle: 

{
  Number : 'some number', 
  Position: { lat: 'some lat', lng: 'some long', }
}

Теперь у меня есть таймер, который обновляет этот объект в родительском.Ребенок также отражает изменения.Внутри ребенка я на самом деле помещаю этот объект транспортного средства на карту в качестве маркера.

Что я пытаюсь сделать здесь, это наблюдать за изменением в опоре (транспортном средстве), если оно меняется, тогда я хочу плавно / анимировать маркерна недавно обновленную позицию.

Я пытался сделать: 

watch: {

vehicle: function(newVal, oldVal){
 console.log('newVal'); 
}

},

Не сработало, ничего не печатало.Должен ли я сделать watcher в родительском компоненте для просмотра и анимации?или ребенок может наблюдать переданное ему свойство?

РЕДАКТИРОВАТЬ:

Изменение объекта Vehicle в родительском:

Если я получаю данные из базы данных в реальном времени, так чтосделать, я сохранил родительский массив, который я зацикливаю, чтобы показать маркеры.

Теперь я зацикливаю массив и сопоставляю новые данные с ним, и просто обновляю значения там, где обновляются.

// Некоторые случайныепозиции 

var positions = [
                    {
                        lat: 24.827393, lng: 67.021769,
                    },
                    {
                        lat: 24.827279, lng: 67.028294,
                    },
                    {
                        lat: 24.834947, lng: 67.024829,
                    },
                    {
                        lat: 24.835719, lng: 67.012825,
                    },
                    {
                        lat: 24.8274599, lng: 67.0322483,
                    },
                ];

                var random = Math.floor((Math.random() * positions.length - 1) + 1);



    this.vehicles[0].position.lat: positions[random].lat;
this.vehicles[0].position.lng: positions[random].lng;

Позже я привязываю его к своим дочерним компонентам следующим образом: 

  <CustomMarker :key="vehicle.number" v-bind:vehicle="vehicle"
                      v-for="(vehicle, index) in vehicles"></CustomMarker>

В основном выше массив случайных позиций только для проверки моего плавного движения, я буду получатьте же ординаты в реальном времени, когда сделано.

1 Ответ

0 голосов
/ 30 ноября 2018

Ваш наблюдатель будет реагировать только на изменения непосредственно в vehicle prop, not изменениях, внесенных в свойства объекта vehicle или его потомков.Я имею в виду, что если родительский компонент мутирует объект транспортного средства, например: 

this.vehicle.Position.lat = 123

и this.vehicle привязан к опоре vehicle дочернего компонента, тогда наблюдатель не будет запущен, потому что онвсе тот же vehicle экземпляр объекта.

Если родитель сделал это вместо: 

this.vehicle = someOtherVehicle

, тогда сработает наблюдатель.

Вы можете указать Vue наблюдатьдля изменения свойств объекта vehicle (и его потомков), установив для deep значение true: 

watch: {
  vehicle: {
    deep: true,
    handler(newVal, oldVal) {
      ...
    }
  }
}

См. watch документы для получения дополнительной информации.

Если вы хотите узнать старые и новые значения широты и долготы, то одним из способов является наблюдение свойства Position в дочернем элементе, изменение свойства Position в родительском объекте и сохранение объекта { lat, lng }неизменяемый:

Ребенок 

watch: {
  'vehicle.Position'(oldVal, newVal) {
    const oldLat = oldVal.lat
    const newLat = newVal.lat
  }
}

Родитель 

// When you want to update the vehicle's position...
this.vehicle.Position = { lat: 123, lng: 456 }
...