创建 JSON.parse 方法以重用 VUE答案

【问题标题】：Create JSON.parse method to reuse VUE创建 JSON.parse 方法以重用 VUE
【发布时间】：2022-01-12 15:20:32
【问题描述】：

所以我正在遍历一个数组（使用 Vue）。在这个数组中，它们是带有字符串的对象。

notifications: [
  0: {
    idType: 1
    type: "delivered"
    user: 12
    visibility: true
    seller: 15
    product: "phone"
    additionalData: "{"type":"iphone","idType":5,"number":"2"}"
  }
  1: {
    idType: 2
    type: "meeting"
    user: 12
    visibility: null
    seller: 12
    company: "hotell"
    additionalData: "{"location":"office","idType":7,"number":"8"}"
  }
  2: {
    idType: 1
    type: "invoiced"
    user: 15
    visibility: null
    seller: 11
    value: 150000
    additionalData: "{"payment":"credit","idType":10,"number":"1"}"
  }
]

所以我需要解析不同附加数据中的所有信息。当我为模板中的每个都做这件事时，它会变得有点混乱，所以我想为它创建一个方法。

我尝试过这样的事情：

parseText(type: string) {
    return JSON.parse(this.note.additionalData).type
},

这显然不起作用，但无法弄清楚如何使其起作用。（将便笺作为道具发送给父组件，并且还在父组件中做v-for）

【问题讨论】：

什么不完全有效？有错误可以提供给我们吗？从它的外观来看，它应该会引发上述错误，您提供的数据不是有效的 JSON。（additionalData 无法正确解析，您需要在以前的双引号之间用单引号替换所有双引号，反之亦然)。
我从 API 中获取，因此无法更改字符串。我希望在模板中能够只写 parseText(payment) 而不是写 JSON.parse(note.additionalData).payment :) 当我像我一样写 .type 之后，它只说类型已声明但值从不阅读

标签： javascript arrays typescript vue.js parsing

【解决方案1】：

我不知道为什么 method 对你不起作用，但你也可以创建一个组件来接收对象作为道具，并在里面有一个计算属性，它会自动为你解析它。

<Notification
  v-for="notification in notifications
  :key="notification.id"
  :notification="notification"
/>

props: {
  notification: {
    required: true,
    type: Object,
  }
},

computed() {
  additionalDataObj() {
    return JSON.parse(this.notification.additionalData)
  }
}

【讨论】：

谢谢！！！！ :)