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

文章目录

一、

该问题是由于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字符串化问题,可通过以下方案解决:

  1. 使用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('解析失败')
  }
}
  1. 自定义双向绑定处理
javascript 复制代码
<el-input 
  :value="JSON.stringify(inputArray)" 
  @input="val => inputArray = parseInput(val)"
></el-input>

// 解析方法
const parseInput = (str) => {
  try {
    return JSON.parse(str)
  } catch {
    return []
  }
}
  1. 使用计算属性中转
javascript 复制代码
const computedArray = computed({
  get: () => JSON.stringify(inputArray),
  set: (val) => {
    try {
      inputArray.value = JSON.parse(val)
    } catch {}
  }
})

关键问题分析:

  • el-input的v-model默认会字符串化数组类型数据
  • 需要手动处理JSON字符串与数组的转换
  • 推荐方案1在保证数据安全性的同时实现需求
相关推荐
深职第一突破口喜羊羊1 小时前
记一次electron开发插件市场遇到的问题
javascript·electron
cypking1 小时前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵1 小时前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构
Britney⁺♛&?ꪶꪫꪜꫀ1 小时前
Vue2上
vue.js·npm
江城开朗的豌豆1 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
float_六七2 小时前
JavaScript:现代Web开发的核心动力
开发语言·前端·javascript
zhaoyang03012 小时前
vue3笔记(2)自用
前端·javascript·笔记
UrbanJazzerati2 小时前
JavaScript Promise完整指南
javascript
挽淚3 小时前
AI对话+React 项目实战(半成品)
javascript·react.js
呆呆的心3 小时前
🚀 JavaScript 数组通关秘籍:从入门到精通的细节指南
前端·javascript