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

【问题标题】：Substitute values depending on response content in Vue 2?根据 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

标签： javascript json vue.js vuejs2 response

【解决方案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)

【讨论】：

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