Passing vue.js store data to a event click handler

Question

I am using regular Vue.js in my project. I store data in a store made from scratch and use it in a template:

<template>
  <div>
    <div class="row">
      <div v-for="(picture, index) in storeState.pictures"
          :key="index"
          class="col-md-2 my-auto">   
          <div >                 
            <img class="img-thumbnail img-responsive" 
                :src="picture.url"
                @click="deleteMe">            
          </div>              
      </div>      
    </div>    
    </div>
</template>

<script>
import { store } from "../common/store.js"

export default {
  name:"PictureUpload",
    data() {
        return {
  storeState: store.state,           
        };
  },
  methods: {
    deleteMe() {
      let apiUrl = this.picture.url
      console.log(apiUrl)
    }
  }
}
</script>

My pictures are rendering well but now I want to add a delete() function to the picture @click and whenever I click on the button I get:

TypeError: Cannot read property 'url' of undefined

So how can I access my picture data inside my method?

you're welcome, there's something went wrong, i received only the upvote score +10 and i didn't receive the accept vote +15 however the answer has the green check mark, please try to unaccept it and accept again it — Boussadjra Brahim
– Boussadjra Brahim, Commented Aug 23, 2020 at 10:04

Boussadjra Brahim · Accepted Answer · 2020-08-23 08:29:15Z

1

You should pass picture as parameter in the click handler :

  @click="deleteMe(picture)">

and refer to it in the method like :

 methods: {
   deleteMe(picture) {
     let apiUrl = picture.url //omit this
     console.log(apiUrl)
    }
   }

the storeState should be a computed property :


export default {
  name:"PictureUpload",
    data() {
        return {
           
        };
  },
  computed:{
     storeState(){
    return store.state;
   }
  },
  methods: {
    deleteMe(picture) {
      let apiUrl = picture.url
      console.log(apiUrl)
    }
  }
}

edited Aug 23, 2020 at 8:29

answered Aug 23, 2020 at 8:21

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing vue.js store data to a event click handler

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related