带有 Vue.js 放大缩略图的简单图片库答案

【问题标题】：Simple picture gallery with enlarged thumbnails with Vue.js带有 Vue.js 放大缩略图的简单图片库
【发布时间】：2020-12-03 15:30:52
【问题描述】：

我正在尝试在我的 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”未在实例，但在渲染期间引用。确保此属性是反应式，无论是在数据选项中，还是对于基于类的组件，通过初始化属性。看： https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

我确实有我的<script>:

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

我该如何解决？

【问题讨论】：

我的回答有问题吗？
我理解其中的逻辑，但我收到了Error in render: "TypeError: Cannot read property 'picture_1' of undefined" 错误
啊抱歉我忘了添加条件渲染<div v-if="picToShow" class="col-md-4 my-auto"> <img :src="pictures[picToShow].picture_1" /> </div>
除了 [pictures] 中的第一张图片外，它正在工作。
是的，是的，它评估 0 为假，所以你应该这样做 v-if="picToShow!==null"

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

您通过在v-show="pictToShow == index" 中添加额外的t 来打错字，这应该是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>

【讨论】：