解决el-input输入框输入数组传参报错
文章目录
- 一、
- 二、DeepSeek回答
一、
该问题是由于JSON规范要求字符串必须使用双引号(")而非单引号(')导致的。
以下是完整的解决方案：
// 转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转换（推荐方案）
<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('解析失败')}
}
- 自定义双向绑定处理
<el-input :value="JSON.stringify(inputArray)" @input="val => inputArray = parseInput(val)"
></el-input>// 解析方法
const parseInput = (str) => {try {return JSON.parse(str)} catch {return []}
}
- 使用计算属性中转
const computedArray = computed({get: () => JSON.stringify(inputArray),set: (val) => {try {inputArray.value = JSON.parse(val)} catch {}}
})
关键问题分析：
- el-input的v-model默认会字符串化数组类型数据
- 需要手动处理JSON字符串与数组的转换
- 推荐方案1在保证数据安全性的同时实现需求