Question

我正在使用幻灯片显示，以便用户可以看到globalgiving api可能具有的任何其他图像。但是，问题是，当页面加载完毕并打开模式时，幻灯片放映将不存在，除非您选择我已在模式中实现的选项卡的打开。但是，这些选项卡与幻灯片放映无关。

下面是我正在使用的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是来自父组件的Object道具。

但是，当我注销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)
        })
      }

如果有人可以帮助，将不胜感激。

非常感谢！

Answer 1

将反应性Vue对象输出到控制台时，控制台不会立即显示其属性值。当您单击反应对象以显示它们时，控制台仅调用它们的“ getter”功能。

在代码中：

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

这将解释控制台中看似矛盾的结果。

我之所以如此，是因为您尝试在axios请求完成之前使用this.projectData。为了证明这一点，您可以在console.log(this.projectData.images)方法中添加then()并查看输出（或使用调试器）。

图片幻灯片未在加载Javascript上显示

1 个答案: