Vue 3 Accessing Array Object

Question

I'm trying to generate passwords by reactively. I have an array object inside my instance and I can list this object with v-for. Also and I can generate random passwords with characters in a passArry. But I need to send chars in data to the passArray when the checkbox is checked. But I can't reach options.status What should I do?

    export default {
    data() {
        return {
            generate: 5,
            result: '',
            passArry : [],
            options :[
                {
                    optionName : 'Lowercase',
                    status : true,
                    chars : 'abcdefghijklmnopqrstuvwxyz',
                },

                {
                    optionName: 'Uppercase',
                    status: false,
                    chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
                },

                {
                    optionName: 'Numbers',
                    status: true,
                    chars: '1234567890',
                },

                {
                    optionName: 'Symbols',
                    status: false,
                    chars: '~!@#$%^&*()_-+={[}]|:;<,>.?/'
                },

                    
            ]
            
        }
    },

watch:{
        generate(){
            this.result.length > 0 ? this.result = '' : this.result

            let charLength = this.passArry.length;
            for(let i = 0; i < this.generate; i++){
                this.result += this.passArry[Math.floor(Math.random() * charLength )]
            }         
        },

user_13129353 · Answer

In you case you would reach it not with option.status but options[0].status. Note that it is options[Array{Object, Object, Object, Object }], so you need to point at the first element of your array.

user_3737177 · Answer

You have an 's' too many: options in options should be option in options and then using this singular option:

Vue 3 Accessing Array Object

2 Answers