完美解决el-input输入框输入数组传参报错问题

 更新时间:2025年05月29日 11:05:10   作者: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输入框输入数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript在网页中画圆的函数arc使用方法

    JavaScript在网页中画圆的函数arc使用方法

    这篇文章主要介绍了JavaScript在网页中画圆的函数arc使用方法的相关资料,需要的朋友可以参考下
    2015-11-11
  • JS获取子、父、兄节点方法小结

    JS获取子、父、兄节点方法小结

    这篇文章主要介绍了JS获取子、父、兄节点方法总结及JS获取兄弟节点的两种方法,需要的朋友可以参考下
    2017-08-08
  • JS闭包原理及其使用场景解析

    JS闭包原理及其使用场景解析

    这篇文章主要介绍了JS闭包原理及其使用场景解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-12-12
  • javaScript中FormData使用方法示例

    javaScript中FormData使用方法示例

    这篇文章主要为大家介绍了javaScript中FormData使用方法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • js事件(Event)知识整理

    js事件(Event)知识整理

    事件(Event)知识整理,本文由网上资料整理而来,需要的朋友可以参考下
    2012-10-10
  • JS对象去重的多种方式小结

    JS对象去重的多种方式小结

    在 JavaScript 中,对象的去重通常是指在一个对象数组中,根据某些属性值去掉重复的对象,本文给大家总结了一些JS对象去重的多种方式,并通过代码示例讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下
    2024-09-09
  • js简易namespace管理器 实例代码

    js简易namespace管理器 实例代码

    js简易namespace管理器 实例代码,需要的朋友可以参考一下
    2013-06-06
  • js 创建一个浮动div的代码

    js 创建一个浮动div的代码

    js 创建一个浮动div的代码,一般用来指导用户下面的操作与多条件选择。点击一下就可显示,具体的大家可以自由发挥。
    2009-12-12
  • JS简单实现动画弹出层效果

    JS简单实现动画弹出层效果

    本文给大家介绍的是是一款javascript弹出层特效,支持点击触发js弹出层,滑过触发js弹出层,带动画效果js弹出层,可自定义函数回调js弹出层。
    2015-05-05
  • JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax

    JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax

    这篇文章主要介绍了JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax的相关资料,具有参考借鉴价值,需要的朋友一起学习吧
    2016-05-05

最新评论