Блог

Главная - Вопросы по программированию - Простая галерея изображений с увеличенными эскизами с Vue.js

Простая галерея изображений с увеличенными эскизами с Vue.js

#javascript #vue.js #vuejs2 #vue-component

#javascript #vue.js #vuejs2 #vue-компонент

Вопрос:

Я пытаюсь реализовать простую галерею изображений в моем 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» не определен в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным либо в опции data, либо для компонентов на основе классов, инициализировав свойство. Смотрите:https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

У меня есть в моем <script> :

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

Как я могу это исправить?

Комментарии:

1. Что-то пошло не так с моим ответом?

2. Я понимаю логику, но получаю Error in render: "TypeError: Cannot read property 'picture_1' of undefined" ошибку

3. ах, извините, я забыл добавить условный рендеринг <div v-if="picToShow" class="col-md-4 my-auto"> <img :src="pictures[picToShow].picture_1" /> </div>

4. Это работает, за исключением первого изображения в [картинки].

5. да, да, он вычисляется 0 как false, поэтому вам следует сделать v-if="picToShow!==null"

Ответ №1:

Вы допускаете опечатку, добавляя лишнее t в v-show="pictToShow == index" , которое должно быть 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>