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

Question

瞄准

我正在尝试通过从数据库获取数据的 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 returns 的值是 0、1 还是 2。 API 只会将 fooType 发送为 0、1 或 2。

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

更多信息

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

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

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

问题

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

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

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

Substitute values depending on response content in Vue 2?

javascript

json

response

vue.js

vuejs2