Vue中如何将非数组值转为数组且保留原数据结构？

当然可以实现，直接在原响应式数据上修改目标属性即可，不需要创建新变量，也不会破坏原有数据结构。

基础场景处理（仅当前层级的price属性） #

遍历你的my_array数组，检查每个对象的price属性是否为数组，若不是则直接将其包装为数组赋值回去——因为Vue的响应式对象支持直接修改属性，修改后会自动触发视图更新：

// 遍历数组，原地转换非数组的price属性
my_array.forEach(item => {
  if (!Array.isArray(item.price)) {
    item.price = [item.price];
  }
});

深层嵌套场景处理（若存在多层嵌套的非数组值） #

如果你的数据存在更深层级的嵌套结构（比如price数组里的对象也有需要转换的非数组属性），可以写一个递归函数来批量处理：

function normalizeArrayProp(obj, propName) {
  // 先判断目标属性存在且是对象类型
  if (obj[propName] && typeof obj[propName] === 'object') {
    if (!Array.isArray(obj[propName])) {
      // 非数组则包装为数组
      obj[propName] = [obj[propName]];
    } else {
      // 是数组则遍历每个元素，递归处理深层对象
      obj[propName].forEach(childItem => {
        if (typeof childItem === 'object' && childItem !== null) {
          // 这里假设深层对象也需要处理price属性，可根据实际需求调整属性名
          normalizeArrayProp(childItem, 'price');
        }
      });
    }
  }
}

// 调用函数处理整个数组
my_array.forEach(item => normalizeArrayProp(item, 'price'));

注意事项 #

• 如果你的my_array是用ref声明的，需要通过.value访问数组本体：my_array.value.forEach(...)
• 这种修改方式完全保留原数据的其他属性（比如price_type、price_layer），仅修改目标属性的结构，不会影响其他逻辑。

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