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

Question

我正在尝试在我的 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 ://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties 。

我确实有<script>：

    data () {

        return {      

          pictures: [],

          picToShow: null,               

        }

      },

我该如何解决？

Answer 1

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