Simple picture gallery with enlarged thumbnails with Vue.js

Question

I am trying to implement a simple pictures gallery in my Vue.js app.

This what I am looking for:

User click on a thumbnail and a larger picture is displayed on the right. This is the code I've done so far:

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

But as I run it, I get this error :

[Vue warn]: Property or method "pictToShow" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

I do have in my <script>:

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

How can I fix it?

I understand the logic but I get a Error in render: "TypeError: Cannot read property 'picture_1' of undefined" error — Toto Briac
ah sorry i forgot to add the conditional rendering <div v-if="picToShow" class="col-md-4 my-auto"> <img :src="pictures[picToShow].picture_1" /> </div> — Boussadjra Brahim
yes yes it evaluates 0 as false so you should do v-if="picToShow!==null" — Boussadjra Brahim

Boussadjra Brahim Boussadjra Brahim · Accepted Answer · 2020-08-13T18:20:44

You're making a typo by adding an extra t in v-show="pictToShow == index" which should be v-show="picToShow == index", but I see that it's not a good practice to make two loops, i recommend to keep the first one and use the selected index to show its image :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>

Simple picture gallery with enlarged thumbnails with Vue.js

1 Answers