DOM не обновляется с обновленным содержимым в Vue - PullRequest
Новая
       34

DOM не обновляется с обновленным содержимым в Vue

0 голосов
/ 19 апреля 2020

Я создаю приложение в Vue. У меня возникает проблема с отображением контента обновления через шину событий. Я также пытался использовать vuex для локального контента, но он все еще демонстрирует ту же проблему.

Контент в формате массива, имеющий несколько объектов, создаваемых через некоторые входные данные формы.

Консоль показывает обновленный контент, но обновленный контент не отображается в DOM.

Позвольте мне добавить несколько скриншотов.

enter image description here

enter image description here

Кто-нибудь может мне помочь ??

Позвольте мне добавить немного кода, используя мой проект. Я использую Vue Materail в коде.

Шаблон 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>

Компонент 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);
    },
  }

Шаблон 2 

{{ serviceInfo }}

Компонент 2: 

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

Заранее спасибо.

1 Ответ

1 голос
/ 19 апреля 2020

Скорее всего, ваши данные загружаются после DOM загружен, так как он вложенный, он не будет реагировать, поэтому вы не можете ожидать его обновления.

У вас есть несколько вариантов:

1) поместить v-if куда-нибудь, что не позволяет DOM загружаться до того, как ваши данные будут на месте.

2) Ручная перезагрузка, мой предпочтительный метод - дать ключ и изменить ключ. Смотрите здесь для подробного примера: https://michaelnthiessen.com/force-re-render/

ПРИМЕЧАНИЕ: Просто для уточнения, если вы получаете ваши данные в PROPS, то это происходит довольно рано, о, если в каком-то жизненном цикле, скажем, «создан» "тогда DOM будет загружаться первым наверняка.

...