Слайд-шоу изображений не отображается при загрузке Javascript - PullRequest
Новая
       28

Слайд-шоу изображений не отображается при загрузке Javascript

0 голосов
/ 25 февраля 2019

Я использую слайд-шоу, чтобы пользователь мог видеть любые дополнительные изображения, которые могут иметь api globalgiving.Но проблема в том, что когда страница загружается и когда вы открываете модальное окно, слайд-шоу там нет, если вы не выберете открыть вкладки, которые я реализовал в модальном режиме.Но эти вкладки не имеют никакого отношения к слайд-шоу.

Ниже приведен HTML-код, который я использую: 

    <div v-if="projectData.images" class="
     <div class="slider_list">
       <img v-for="(src, index) in projectData.images.slice(0, 5)" :key="src" :src="src" v-show="index === active">
     </div>

     <button class="slider_prev" @click="change(active-1)">prev</button>
     <button class="slider_next" @click="change(active+1)">next</button>

     <ul class="slider_dots">
        <li v-for="(src, index) in projectData.images.slice(0, 5)" :key="src" :class="{active:index === active}" @click="change(index)">
           <button>{{index}}</button>
        </li>
     </ul>
</div>
<div v-else class="bigImage" :style="{backgroundImage: 'url(' + projectData.banner + ')'}"></div>

Ниже приведен код Javascript, который я использую: 

change: function(index) {
      if (this.projectData.images.length < 5) {
        this.direction = index > this.active ? 1 : -1
        this.active = (index + this.projectData.images.length) % this.projectData.images.length
      } else if (this.projectData.images.length = 5) {
        this.direction = index > this.active ? 1 : -1
        this.active = (index + this.projectData.images.length) % this.projectData.images.length
      } else if (this.projectData.images.length > 5) {
        this.direction = index > this.active ? 1 : -1
        this.active = (index + this.projectData.images.length) % this.projectData.images.length
      }
    }

projectData - это объектреквизит, исходящий от родительского компонента.

Однако, когда я выхожу из системы this.projectData, отображается полный объект, в котором есть изображения.Но, если я выхожу из системы this.projectData.images, то он выдается как undefined, и я не уверен, почему это происходит.

Это родительский код JavaScript: 

if (project.imageGallerySize > 1) {
        axios.get(`https://api.globalgiving.org/api/public/projectservice/projects/${project.id}/imagegallery?api_key=71774a46-da0c-4748-a5ea-7001d6a47709`, {
          headers: {
            Accept: "application/json"
          }
        }).then(response => {
          projectObject['images'] = [];
          for (let i = 0; i < response.data.images.image.length; i++) {
            projectObject['images'].push(response.data.images.image[i].imagelink.filter(function(image) {
              if (image.size == 'orginal') {
                return true;
              }
            })[0].url);
          }
        }).catch(error => {
          console.log("Wrong", error)
        })
      }

Есликто-то может, пожалуйста, помочь, это будет высоко ценится.

Большое спасибо!

1 Ответ

0 голосов
/ 25 февраля 2019

Когда вы выводите реактивный объект vue на консоль, консоль не сразу отображает значение своих свойств.Консоль вызывает только функции «получения» реактивных объектов, когда вы нажимаете на них, чтобы отобразить их.

В коде: 

console.log(this.projectData); // <-- the printed properties are only the getter functions, not their values
console.log(this.projectData.images); // <-- the output will be the current value of this.projectData.images

Это объясняет кажущиеся противоречивыми результаты в консоли.

Я предполагаю, почему это происходит, потому что вы пытаетесь использовать this.projectData до завершения запроса axios.Чтобы доказать это, вы можете добавить console.log(this.projectData.images) к вашему then() методу и посмотреть результат (или использовать отладчик).

...