Vue 3 访问数组对象答案

【问题标题】：Vue 3 Accessing Array ObjectVue 3 访问数组对象
【发布时间】：2021-10-15 15:16:36
【问题描述】：

我正在尝试通过被动方式生成密码。我的实例中有一个数组对象，我可以用 v-for 列出这个对象。另外，我可以生成带有passArry 中字符的随机密码。但是当检查复选框时，我需要在数据中发送chars 987654323 @。但是联系不上options.status怎么办？

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

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

在您的情况下，您不会使用option.status 而是使用options[0].status。请注意，它是options[Array{Object, Object, Object, Object }]，因此您需要指向数组的第一个元素。

【讨论】：

【解决方案2】：

你的“s”太多了： options in options 应该是 option in options 然后使用这个单数 option:

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

【讨论】：