创建 JSON.parse 方法以重用 VUE

Question

所以我正在遍历数组（使用 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
},

这显然行不通，但不知道如何让它发挥作用。（作为 prop 向父组件发送 note，并且还在父组件中执行 v-for）

Answer 1

我不确定为什么 method 对你不起作用，但你也可以创建一个组件，将对象作为 prop 接收，并在其中计算属性会自动为你解析。

<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)
  }
}

创建 JSON.parse 方法以重用 VUE

Create JSON.parse method to reuse VUE

javascript

arrays

parsing

typescript

vue.js