使用Vue.js放大缩略图的简单图片库

问题描述

我正在尝试在Vue.js应用中实现一个简单的图片库。

这就是我要寻找的：

用户单击缩略图，右侧显示较大的图片。这是我到目前为止完成的代码：

     <div class="col-md-6">
            <div class="row" id="grid">
              <div v-for="(picture,index) in pictures"
              :key="picture.pk"
              class="col-md-4 my-auto"
              >   
              <div @click="picToShow= index">                 
                <img class="img-thumbnail img-responsive" :src="picture.picture_1">
              </div>
              </div>  
            </div>
          </div>
    
          <div class="col-6 text-center my-auto">        
              <div v-for="(picture,index) in pictures"
              :key="picture.pk"
              class="col-md-4 my-auto"
              >                    
              <img v-show="pictToShow == index" :src="picture.picture_1">          
              </div>    
          </div>

但是在运行它时，出现此错误：

[Vue警告]：属性或方法“ pictToShow”未在 实例，但在渲染过程中被引用。确保此属性是 在data选项中或对于基于类的组件，通过 初始化属性。看到： https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

我确实有<script>：

    data () {
        return {      
          pictures: [],picToShow: null,}
      },

我该如何解决？

解决方法

您正在通过在t中添加一个额外的v-show="pictToShow == index"来打错字，而该v-show="picToShow == index"应该是:src="pictures[picToShow].picture_1"，但是我发现进行两个循环不是一个好习惯，我建议保留第一个，并使用选定的索引显示其图像 <div class="col-md-6"> <div class="row" id="grid"> <div v-for="(picture,index) in pictures" :key="picture.pk" class="col-md-4 my-auto" > <div @click="picToShow= index"> <img class="img-thumbnail img-responsive" :src="picture.picture_1"> </div> </div> </div> </div> <div class="col-6 text-center my-auto"> <div v-if="picToShow!==null" class="col-md-4 my-auto"> <img :src="pictures[picToShow].picture_1" /> </div> </div> ：

'