根据 Vue 2 中的响应内容替换值？

Posted 2023-02-16

【中文标题】根据 Vue 2 中的响应内容替换值？

【英文标题】：Substitute values depending on response content in Vue 2?

【发布时间】：2021-10-10 16:15:04

【问题描述】：

瞄准

我正在尝试通过从数据库中获取数据的 API 来检索数据。当我检索数据时，我收到如下所示的响应（这是我的模拟数据，存储在 mock.js 文件中）-

[
 id: '2000', description: 'Big Company and Co.', fooType: 0,
 id: '2213', description: '3g Capital', fooType: 1,
 id: '2936', description: 'AAA Pokemon Company', fooType: 2,
 id: '3456', description: 'World Wrestling Entertainment', fooType: 0,
 id: '4040', description: 'Brave Old Company', fooType: 0,
 id: '9367', description: 'The Wild Wild Blessed', fooType: 1
]

我试图在收到响应后更改响应，以便 fooType 是 3 个值之一，具体取决于 fooType 返回的值是 0、1 还是 2。 API 只会将 fooType 发送为 0、1 或 2。

例如fooType: 1 => fooType: 'abcd', fooType: 2 => fooType: 'efg', fooType: 0 => fooType: 'abcdefgh'

更多信息

下面标签中列出的项目是我上面数据中的（键，值）的映射，它被正在使用的组件呈现为表中的行。

<NiceDataTable
    striped
    small
    fixed
    :items="fooData"
    :fields="fields"
    add-table-classes="table-bordered"
/>

虽然我可能将一个相当简单的问题复杂化了，但我们将不胜感激。

问题

如何根据初始响应中的值转换特定响应键的值（不触及后端 API）？

【问题讨论】：

[ id: '2000', description: 'Big Company and Co.', fooType: 0, id: '2213', description: '3g Capital', fooType: 1, id: '2936', description: 'AAA Pokemon Company', fooType: 2, id: '3456', description: 'World Wrestling Entertainment', fooType: 0, id: '4040', description: 'Brave Old Company', fooType: 0, id: '9367', description: 'The Wild Wild Blessed', fooType: 1 ].map(responseItem => const map = 0: "abcdefgh", 1: "abcd", 2: "efg" return ...responseItem, fooType: map[responseItem.fooType] )

请将此作为答案，如果它运行我会接受，我相信它会@amidnikmal

我已经尝试过这个以及它的许多版本，我能得到的最好的结果是 3 个未定义的对象：未定义，我需要一个数组对象数组的响应 @amidnikmal

【参考方案1】：

试试这个代码

const data = [ id: '2000', description: 'Big Company and Co.', fooType: 0 ,  id: '2213', description: '3g Capital', fooType: 1 ,  id: '2936', description: 'AAA Pokemon Company', fooType: 2 ,  id: '3456', description: 'World Wrestling Entertainment', fooType: 0 ,  id: '4040', description: 'Brave Old Company', fooType: 0 ,  id: '9367', description: 'The Wild Wild Blessed', fooType: 1 ];
const map =  0: "abcdefgh", 1: "abcd", 2: "efg" ;
const output = data.map(responseItem => 
  return  ...responseItem, fooType: map[responseItem.fooType] 
);
console.log(output)

【讨论】：

谢谢你，重构这很奏效。我欠你一个