Vue中使用JSON.parse将字符串转换为对象失败问题咨询

问题核心原因 #

你没有将JSON.parse()的返回值赋值回internData变量，JSON.parse()不会修改传入的原始字符串参数，只会返回新的解析后结果，你当前的代码执行完解析操作后直接丢弃了结果，所以internData始终是初始的字符串类型。

其他需要修正的问题 #

• 模板中使用了未声明的data变量，同时绑定了不存在的onInputme输入事件回调，会触发控制台报错
• 直接复用internData同时绑定输入框和存解析结果会出现类型冲突：输入框的输入值始终是字符串，当你把internData转成数组后，用户再次输入会触发Vue自动把数组转成字符串覆写变量，建议拆分两个变量分别存原始输入和解析后结果
• 未做异常捕获：如果用户输入的内容不是合法JSON格式，直接调用JSON.parse()会抛出错误导致代码终止执行

修正后代码示例 #

JS代码 #

new Vue({
  el: "#app",
  data() {
    return {
      datatype: "foo",
      // 存储输入框原始字符串
      inputStr: "[1, 2, 3]",
      // 存储解析后的对象/数组
      internData: null
    };
  },

  methods: {
    transformData() {
      try {
        // 将解析结果赋值给internData
        this.internData = JSON.parse(this.inputStr);
        // 现在可以正常调用数组方法
        this.internData.push(12);
        return this.internData;
      } catch (err) {
        console.error("JSON格式非法，转换失败：", err)
      }
    },
    whatFormat(){
      console.log("输入内容类型：", typeof this.inputStr)
      console.log("解析后内容类型：", typeof this.internData, "是否为数组：", Array.isArray(this.internData))
    }
  },
});

HTML代码 #

<html>
  <body>
    <div id="app">
      <h5> {{ internData }}</h5>
      <input v-model="inputStr" />
      <button type="button" @click="transformData">click to transform</button>
      <button type="button" @click="whatFormat">what data type</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者herbert mühlex