为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

DIEA 2023-01-06 11:21:41

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

这就是我要找的:

http://img2.sycdn.imooc.com/63b793d700019e8c12470465.jpg

用户单击缩略图,右侧会显示更大的图片。这是我到目前为止所做的代码:


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

        }

      },

我该如何解决?


查看完整描述

1 回答

?
达令说

TA贡献1566条经验 获得超6个赞

你通过添加一个额外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>


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 9 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信