使用 Json.parse 在 vue 中将字符串转换为 Object答案

【问题标题】：convert string to Object in vue using Json.parse使用 Json.parse 在 vue 中将字符串转换为 Object
【发布时间】：2021-11-10 06:23:06
【问题描述】：

我想将输入元素中的输入值转换为对象

使用Json.parse() 转换internData 值不会将字符串转换为对象

在浏览器控制台中执行相同的操作会返回正确的结果。

let data = "[1,2,3,4]";

JSON.parse(datas)
(4) [1, 2, 3, 4]

typeof z
'object'

我在这里错过了什么？

new Vue({
  el: "#app",
  data() {
    return {
      datatype: "foo",
      internData: "[1, 2, 3]",
    };
  },

  methods: {
    transformData() {
      //
      //
      JSON.parse(this.internData);

     
      //  this.internData.push(12);

      return this.internData;
    },
    whatFormat(){
      console.log(typeof this.internData)
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<html>
  <body>
    <div id="app">
      <h5> {{ data }}</h5>
     
       <input v-model="internData" @input="onInputme" />
      
       <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>

【问题讨论】：

transformData() { return JSON.parse(this.internData); },

标签： javascript json vue.js

【解决方案1】：

您当前遇到的问题是您没有从transformData 函数更新internData，您应该使用函数内部相同的JSON 解析格式重新分配internData，如下所示

transformData() {
  this.internData = JSON.parse(this.internData);
}

或

您可以将transformData 作为计算属性并注意transformData 的类型。这里可以去掉点击事件来解析数据。

new Vue({
  el: "#app",
  data() {
    return {
      datatype: "foo",
      internData: "[1, 2, 3]",
    };
  },
  methods: {
    whatFormat() {
      console.log(this.transformData);
      console.log(typeof this.transformData);
    }
  },
  computed: {
    transformData: function () {
      return JSON.parse(this.internData)
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="internData" />
  <button type="button" @click="whatFormat">what data type</button>
</div>

【讨论】：

【解决方案2】：

您的 transformData 函数转换了字符串，但新创建的对象没有分配给 internData 属性。

这应该可以解决问题：

transformData() {
  this.internData = JSON.parse(this.internData);
},

【讨论】：