javascript - 将 Advance Join() 与 VueJS 结合使用

Question

我想加入这个数据库结构

list : [
 {
  Qte : 5,
  Detail : 'A',
 },
 {
  Qte : 1,
  Detail : 'B',
 },
],

变成这样的字符串:

This.mydetail = '5 x A , 1 x B';

我尝试在 vuejs 中使用该代码来加入我的表

{{ list.join(' , ') }}

但它不适用于我的情况，请问有什么方向吗？谢谢。

Answer 1

list.map(({Qte, Detail}) => `${Qte} x ${Detail}`).join(', ');

这个maps超过列表和 destructures每个列表项分为 Qte 和 Detail，最后使用 template literal创建一个字符串数组，例如:

['5 x A','1 x B']

一个简单的join然后返回最终输出:

“5 x A，1 x B”