passing event.target.getAttribute() to data in Vue

Question

HTML code:

<img src="images/website/image.svg" alt="" width="150px" height="150px" v-on:click="submitimage($event)"> 

and want to pass the src url of the image to data passing it through $event to a Vue method.

vue script code:

<script>
export default {
     
    data(){
        return {
            imgurl: ''
        }
    },
    methods: {
        submitimage(event){    
        var element = event.target;
        var id = element.getAttribute('src');
        window.console.log(id)
        this.imgurl = id
      
        }, 

    },

}
</script>

I also tried:

methods: {
        submitimage(event){    
        this.imgurl = this.event.target.getAttribute('src');
        window.console.log(event.target.getAttribute('src'))
        
      
        }, 

But it works with window.console.log and shows the correct URL, but if I try it to pass it to data(), its not working. No error, its just empty or undefined. What am I missing?

Answer 1

It looks like everything your are doing is correct:

check this stackblitz here: https://stackblitz.com/edit/vue-tu7vzx

So I guess it is really the question how you are trying to access this.imgurl

However, your question does not show enough code to make an educated guess.