Vue 3 Accessing Array Object-CodePudding

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?

<div class="form-check" v-for="options in options" :key="options.optionName">
            <input type="checkbox" class="form-check-input"  v-model="options.status">

    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 )]
            }         
        },

CodePudding user response：

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.

CodePudding user response：

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

<div  v-for="option in options" :key="option.optionName">
    <input type="checkbox"   v-model="option.status">
</div>