Vue 3访问数组对象

Question

我正在尝试通过反应生成密码。我的实例中有一个数组对象，我可以用v-for列出这个对象。此外，我还可以用passArry中的字符生成随机密码。但当复选框被选中时，我需要将数据中的chars发送到passArray。但是我联系不到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 )]
}         
},

Answer 1

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

Answer 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>