快捷導(dǎo)航

完美解決el-input輸入框輸入數(shù)組傳參報(bào)錯(cuò)問題

更新時(shí)間：2025年05月29日 11:05:10 作者：shuru

這篇文章主要介紹解決el-input輸入框輸入數(shù)組傳參報(bào)錯(cuò)問題,該問題是由于JSON規(guī)范要求字符串必須使用雙引號(hào)(")而非單引號(hào)(')導(dǎo)致的,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧

一、

該問題是由于JSON規(guī)范要求字符串必須使用雙引號(hào)(")而非單引號(hào)(')導(dǎo)致的。
以下是完整的解決方案：

// 轉(zhuǎn)json
const strictParse = input => {
  try {
    // 先嘗試標(biāo)準(zhǔn)JSON解析
    return JSON.parse(input)
  } catch {
    try {
      // 二次嘗試替換引號(hào)
      return JSON.parse(input.replace(/'/g, '"'))
    } catch {
      return input // 返回空數(shù)組或拋出錯(cuò)誤
    }
  }
}
  // 函數(shù)再次賦值
  const fnn = (keyValue) => {
    const parsedArray = strictParse(keyValue)
    // console.log('%c【' + 'parsedArray' + '】打印', 'color:#fff;background:#0f0', parsedArray, typeof parsedArray)
    if (Array.isArray(parsedArray)) {
      // 得到標(biāo)準(zhǔn)數(shù)組 ["safe_zone", "node_type"]
      msg.value = parsedArray
    } else if (typeof parsedArray == "object") {
      // 對(duì)象
      msg.value = parsedArray
    } else {
      msg.value = keyValue
    }
  }

二、DeepSeek回答

在Vue中使用el-input組件時(shí)，當(dāng)輸入數(shù)組類型數(shù)據(jù)出現(xiàn)JSON字符串化問題，可通過以下方案解決：

使用JSON.parse轉(zhuǎn)換（推薦方案）

<el-input v-model="inputValue" @change="handleInputChange"></el-input>
// 方法處理
const handleInputChange = (value) => {
  try {
    const parsedArray = JSON.parse(value)
    if(Array.isArray(parsedArray)){
      // 得到標(biāo)準(zhǔn)數(shù)組 ["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 []
  }
}

使用計(jì)算屬性中轉(zhuǎn)

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

關(guān)鍵問題分析：

el-input的v-model默認(rèn)會(huì)字符串化數(shù)組類型數(shù)據(jù)
需要手動(dòng)處理JSON字符串與數(shù)組的轉(zhuǎn)換
推薦方案1在保證數(shù)據(jù)安全性的同時(shí)實(shí)現(xiàn)需求

到此這篇關(guān)于解決el-input輸入框輸入數(shù)組傳參報(bào)錯(cuò)的文章就介紹到這了,更多相關(guān)el-input輸入框輸入數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: