Get id of specific item in list

Published 3 months ago by umerhassan

I am using vue-croppa library for image cropping https://github.com/zhanziyang/vue-croppa I have multiple initiated multiple images with same model. I defined instances in list, but want to get id of specific item on triggering function "handleCroppaFileChoose"

Best Answer (As Selected By umerhassan)
topvillas
@file-choose="handleCroppaFileChoose(myCroppa[1])"
handleCroppaFileChoose: function(item){
        console.log(item);             
 },
umerhassan
var app = new Vue({
    el: '#imagesDiv',
    data: {
        myCroppa:[],
        imgUrl: '',
        numberFiles:0,
    },
    methods: {
        handleCroppaFileChoose: function(e){
        // here I want id of specific item lets say I get id for 3rd instance
        console.log(this.myCroppa[3]._uid);             
        },
})
topvillas

Pass the id to the function.

umerhassan

Can you give any hint that, how to pass?

topvillas

You want me to tell you how to pass parameters to functions?

umerhassan

did you understand my problem?

topvillas

Pass the id of the item that triggers handleCroppaFileChoose

Show us your template.

umerhassan

I am using vue js image cropper, I initiated 6 instances from one component as above. It assigned dynamically id to each instance. On each click I call "handleCroppaFileChoose" method but I want handler or element selector of clicked instance. If I use $(this) it returns "#imagesDiv" element.

umerhassan
<croppa v-model="myCroppa[1]" :quality="5" id="image-1" @file-choose="handleCroppaFileChoose" @image-remove="handleImageRemove" :show-loading="true" :width="180" :height="180" :prevent-white-space="true" canvas-color="transparent"></croppa>
topvillas
@file-choose="handleCroppaFileChoose(myCroppa[1])"
handleCroppaFileChoose: function(item){
        console.log(item);             
 },
umerhassan

Simple.. :) actually I was used to jQuery it is my first try in vue thank you

Please sign in or create an account to participate in this conversation.