Vue 3访问数组对象实现响应式密码生成时无法读取options.status如何解决

核心问题 #

• 模板内v-for遍历的别名和源数组重名，导致作用域变量覆盖，所以无法正常访问status属性
• 没有对options的状态变更做监听，选中/取消复选框时不会更新passArry的字符集
• 缺少初始化逻辑，页面加载时passArry为空

模板部分修正 #

把v-for的别名改成和源数组不同的命名，避免作用域覆盖：

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

逻辑部分修正 #

新增字符集更新方法，同时增加对options的深度监听，复选框状态变化时自动刷新字符集和密码：

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: '~!@#$%^&*()_-+={[}]|:;<,>.?/'
        }
      ]
    }
  },
  created() {
    // 页面加载时初始化字符集
    this.updatePassChars()
  },
  watch:{
    generate(){
      this.result = ''
      const charLength = this.passArry.length
      // 兼容无选中项的边界情况
      if (!charLength) return
      for(let i = 0; i < this.generate; i++){
        this.result += this.passArry[Math.floor(Math.random() * charLength )]
      }         
    },
    // 深度监听options的状态变化，复选框修改时自动更新
    options: {
      deep: true,
      handler() {
        this.updatePassChars()
        // 字符集更新后重新生成密码
        this.generate && this.$watch.run('generate')
      }
    }
  },
  methods: {
    updatePassChars() {
      // 收集所有选中项的字符，合并为单个数组赋值给passArry
      let allChars = ''
      this.options.forEach(item => {
        if (item.status) {
          allChars += item.chars
        }
      })
      this.passArry = allChars.split('')
    }
  }
}

内容的提问来源于stack exchange，提问作者baydogan