使用 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"：

 <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>