完美解决el-input输入框输入数组传参报错问题
作者：shuru
这篇文章主要介绍解决el-input输入框输入数组传参报错问题,该问题是由于JSON规范要求字符串必须使用双引号(")而非单引号(')导致的,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧
一、
该问题是由于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在保证数据安全性的同时实现需求
到此这篇关于解决el-input输入框输入数组传参报错的文章就介绍到这了,更多相关el-input输入框输入数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！