Remove comma in the last element in JavaScript Vuejs

Question

I want to remove comma in the last element in Vue. But I dont know how to do that because the index of the last element is unknown.

<td v-if="category.sub_category.length > 0"> 
                      <template v-for="cat in category.sub_category">
                        {{ addComma(cat.subcategory_name) }}
                      </template>
                    </td>

addComma(subCat) {
  let elements = [];
  elements.push(subCat);
  console.log(elements);
  
  if (elements != ""){
    elements += ", ";
  }

  return elements;
},

And this is the result of console.log(elements) above.

And this is the result of all code above

Answer 1

This should work

<td v-if="category.sub_category.length > 0">
      {{category.sub_category.map(({subcategory_name}) => subcategory_name).join(', ')}}
</td>

I'd be tempted to move it to a computed though - keeps markup clean

<td v-if="category.sub_category.length > 0">
      {{subcats}}
</td>


computed: {
  subcats() {
    return this.category.sub_category.map(({subcategory_name}) => subcategory_name).join(', ');
  }
}

Answer 2

elements.join(',')

You don't need to create a function for this just use it inside the Vue tag like this

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

Please check in image. I posted answer after checking.