dimanche 12 décembre 2021

VueJs3 checkbox automatically checked all when select all after upload image

I want to make a method that when executed will check all inputs that have images and text, where this method will run on the input checkbox with the label Select All, which when select all is checked automatically all the input checkboxes on the uploaded image will be checked. Like the example I made on the imageChecked() method which worked successfully where when the input is checked, the checked image data will be entered/returned to the image array in crudData{'image':[]}, and the text input data will be entered/returned to the array name in crudData{'name':[]}. Does anyone understand the case I'm asking about? Thank you.

Here is the complete code https://jsfiddle.net/ntkpx7c0/5/

<script>
export default {
    data() {
        return{
            crudData:{
                'id': null,
                'name': [],
                'image': [],
                'arrImage': [],
            },
        }
    },
    methods: {
        imageUpload(e, maxItem){                    
            ....
        },
        uploadImage(e){
            ...
        },
        removeImage(key){
            ...
        }, 
        imageChecked() {
            let checkedImages = this.crudData.arrImage.filter(img => img.checked)
            this.crudData.image = checkedImages.map(img => img.image)
            this.crudData.name = checkedImages.map(img => img.name)
            console.log({imageFiles: this.crudData.image, names: this.crudData.name})
        }
    }


}



Aucun commentaire:

Enregistrer un commentaire