第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 Vue.js 放大縮略圖的簡單圖片庫

使用 Vue.js 放大縮略圖的簡單圖片庫

DIEA 2023-01-06 11:21:41
我正在嘗試在我的 Vue.js 應(yīng)用程序中實現(xiàn)一個簡單的圖片庫。這就是我要找的:用戶單擊縮略圖,右側(cè)會顯示更大的圖片。這是我到目前為止所做的代碼:     <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>但是當(dāng)我運行它時,我得到了這個錯誤:[Vue 警告]:屬性或方法“pictToShow”未在實例上定義,但在渲染期間被引用。通過初始化屬性,確保此屬性是反應(yīng)性的,無論是在數(shù)據(jù)選項中,還是對于基于類的組件。請參閱: https ://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties 。我確實有<script>:    data () {        return {                pictures: [],          picToShow: null,                       }      },我該如何解決?
查看完整描述

1 回答

?
達令說

TA貢獻1821條經(jīng)驗 獲得超6個贊

你通過添加一個額外t的v-show="pictToShow == index"should be 來打錯字v-show="picToShow == index",但我發(fā)現(xiàn)制作兩個循環(huán)不是一個好習(xí)慣,我建議保留第一個并使用選定的索引來顯示它的圖像: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>


查看完整回答
反對 回復(fù) 2023-01-06
  • 1 回答
  • 0 關(guān)注
  • 236 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號