CODEWITHSUNDEEP
javascriptvue.js
yassine j
yassine j

Reputation: 515

Use Advance Join() with VueJS

I would like to join this database structure 

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

Into a string like that :

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

I tried to use that code in vuejs to join my table 

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

But it's not working in my case, any orientation please ? thank you .

Upvotes: 0

Views: 321

Answers (1)

David Weldon
David Weldon

Reputation: 64332

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

This maps over list and destructures each list item into Qte and Detail, and finally uses a template literal to create an array of strings like:

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

A simple join then returns the final output:

'5 x A, 1 x B'

Upvotes: 2

Related Questions