解决el-input输入框输入数组传参报错

i_am_a_div_日积月累_2025-05-29 18:37

文章目录

一、
二、DeepSeek回答

一、

该问题是由于JSON规范要求字符串必须使用双引号(")而非单引号(')导致的。

以下是完整的解决方案：

javascript 复制代码

// 转json
const strictParse = input => {
  try {
    // 先尝试标准JSON解析
    return JSON.parse(input)
  } catch {
    try {
      // 二次尝试替换引号
      return JSON.parse(input.replace(/'/g, '"'))
    } catch {
      return input // 返回空数组或抛出错误
    }
  }
}



  // 函数再次赋值
  const fnn = (keyValue) => {
    const parsedArray = strictParse(keyValue)
    // console.log('%c【' + 'parsedArray' + '】打印', 'color:#fff;background:#0f0', parsedArray, typeof parsedArray)
    if (Array.isArray(parsedArray)) {
      // 得到标准数组 ["safe_zone", "node_type"]
      msg.value = parsedArray
    } else if (typeof parsedArray == "object") {
      // 对象
      msg.value = parsedArray
    } else {
      msg.value = keyValue
    }
  }

二、DeepSeek回答

在Vue中使用el-input组件时，当输入数组类型数据出现JSON字符串化问题，可通过以下方案解决：

使用JSON.parse转换（推荐方案）

javascript 复制代码

<el-input v-model="inputValue" @change="handleInputChange"></el-input>

// 方法处理
const handleInputChange = (value) => {
  try {
    const parsedArray = JSON.parse(value)
    if(Array.isArray(parsedArray)){
      // 得到标准数组 ["safe_zone", "node_type"]
    }
  } catch(e) {
    console.error('解析失败')
  }
}

自定义双向绑定处理

javascript 复制代码

<el-input 
  :value="JSON.stringify(inputArray)" 
  @input="val => inputArray = parseInput(val)"
></el-input>

// 解析方法
const parseInput = (str) => {
  try {
    return JSON.parse(str)
  } catch {
    return []
  }
}

使用计算属性中转

javascript 复制代码

const computedArray = computed({
  get: () => JSON.stringify(inputArray),
  set: (val) => {
    try {
      inputArray.value = JSON.parse(val)
    } catch {}
  }
})

关键问题分析：

el-input的v-model默认会字符串化数组类型数据
需要手动处理JSON字符串与数组的转换
推荐方案1在保证数据安全性的同时实现需求