問題描述

不能解析 2 層 只能解析一層

在 Vue 項目中，嘗試通過動態路徑（如 'otherInfo.businessPlacePhotoUrlLabel'）訪問或修改嵌套對象屬性時，發現 this['a.b.c'] 無法正確解析，導致返回 undefined。

錯誤示例

removeImg(valLabel, valueLabel) {console.log(this[valLabel]); // undefined（無法解析 'a.b.c'）
}

問題原因

• 'a.b.c' 這樣的字符串路徑，它只會查找 this 上的 'a.b.c' 屬性（而不是 this.a.b.c）。
• 例如：

• • this['otherInfo.businessPlacePhotoUrlLabel'] 會查找 this 上是否有 'otherInfo.businessPlacePhotoUrlLabel' 這個鍵，而不是 this.otherInfo.businessPlacePhotoUrlLabel。

解決方案

方法 1：手動解析路徑（推薦）

適用于任意深度的嵌套對象：

/*** 獲取嵌套對象屬性值* @param {Object} obj - 目標對象* @param {string} path - 路徑（如 'a.b.c'）* @returns {any} - 返回屬性值，如果路徑無效返回 undefined*/
function getNestedValue(obj, path) {return path.split('.').reduce((o, key) => o && o[key], obj);
}/*** 設置嵌套對象屬性值* @param {Object} obj - 目標對象* @param {string} path - 路徑（如 'a.b.c'）* @param {any} value - 要設置的值*/
function setNestedValue(obj, path, value) {const keys = path.split('.');const lastKey = keys.pop();const parent = keys.reduce((o, key) => o && o[key], obj);if (parent) parent[lastKey] = value;
}// 示例：在 Vue 方法中使用
removeImg(valLabel, valueLabel) {const valLabelValue = getNestedValue(this, valLabel);const valueLabelValue = getNestedValue(this, valueLabel);console.log(valLabelValue, valueLabelValue); // 正確輸出setNestedValue(this, valLabel, ''); // 清空setNestedValue(this, valueLabel, ''); // 清空
}

方法 2：直接訪問（適用于固定路徑）

如果路徑結構固定（如 'otherInfo.businessPlacePhotoUrlLabel'），可以手動拆分：

removeImg(valLabel, valueLabel) {const [obj1, key1] = valLabel.split('.');const [obj2, key2] = valueLabel.split('.');console.log(this[obj1][key1]); // 正確訪問this[obj1][key1] = ''; // 清空this[obj2][key2] = ''; // 清空
}

注意事項

1. 確保路徑存在：如果路徑中間某個對象不存在，getNestedValue 會返回 undefined，setNestedValue 不會設置值。
2. 避免路徑錯誤：確保傳入的 path 格式正確（如 'a.b.c'，不能是 'a..b' 或 'a.b.'）。
3. Vue 響應式更新：如果直接修改嵌套對象，Vue 可能不會觸發更新，建議使用 Vue.set 或返回新對象。

總結

getNestedValue 和 setNestedValue 方法，確保代碼健壯性。 ?