Vue/JavaScript循环验证下拉数据：需至少选一项非默认值

问题 #

现有如下data属性：

mappingData: {
    id_feed: "",    
    projectFieldOptions: [],
},

通过HTTP请求填充projectFieldOptions数组，数组中每个对象对应一个下拉框，初始状态下每个对象的text属性值为“Do Not Import”。用户选择下拉框其他选项时，text值会改变。

需求：若至少有一个对象的text值不是“Do Not Import”或“do_not_import”，则弹出alert('success')；否则弹出alert('false')（即用户必须至少选择一个非默认选项）。

尝试了以下代码，但仅对最后一个下拉框生效，无法实现正确校验逻辑：

watch : {
    mappingData: {
        handler(newData, oldData) {
            for( let key in newData.projectFieldOptions ) {
                if( newData.projectFieldOptions[key].text == 'Do Not Import' ||  newData.projectFieldOptions[key].text == 'do_not_import' ) {
                    alert('error');
                } else {
                    alert('false');
                }
            }
        }
    }
}

解决方法 #

你的代码问题在于：

• 循环过程中每遍历一个元素就弹出提示，导致最后一次弹出的结果覆盖了前面的判断
• 逻辑判断完全搞反，需求是检查是否存在至少一个非默认值，而非逐个判断每个元素是否为默认值

正确实现思路：

1. 遍历数组，判断是否存在任意一个元素的text不是默认值
2. 遍历结束后统一弹出对应提示，避免循环内频繁弹出导致逻辑混乱

修改后的代码：

watch: {
    mappingData: {
        deep: true, // 监听对象内部数组的变化必须开启深度监听
        handler(newData) {
            // 检查是否存在至少一个非默认选项
            const hasSelected = newData.projectFieldOptions.some(item => {
                return item.text !== 'Do Not Import' && item.text !== 'do_not_import';
            });

            hasSelected ? alert('success') : alert('false');
        }
    }
}

关键说明：

• deep: true：mappingData是对象，内部projectFieldOptions数组的变化属于深层属性变更，必须开启深度监听才能触发回调
• Array.some()：遍历数组时只要找到一个符合条件的元素就返回true，完美匹配“至少一个非默认值”的需求
• 统一提示时机：遍历完成后根据结果弹出提示，避免多次弹窗干扰判断

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