删除JavaScript Vuejs中最后一个元素中的逗号[重复]答案

【问题标题】：Remove comma in the last element in JavaScript Vuejs [duplicate]删除JavaScript Vuejs中最后一个元素中的逗号[重复]
【发布时间】：2021-10-02 07:00:34
【问题描述】：

我想删除 Vue 中最后一个元素中的逗号。但是我不知道该怎么做，因为最后一个元素的索引是未知的。

<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;
},

这是上面console.log(elements)的结果。

这是上面所有代码的结果

【问题讨论】：

我建议在尝试在 DOM 中渲染字符串之前注意逗号
@Bravo 这不起作用。未插入逗号。
是的，因为还有很多错误......而不是那个模板，只需使用{{category.sub_category.map(({subcategory_name}) => subcategory_name).join(', ')}}
这个最优雅，使用CSS：stackoverflow.com/a/42130196/295783
然而，@mplungjan，您可以看到对该解决方案的批评在一定程度上是有效的

标签： javascript vue.js

【解决方案1】：

这应该可以工作

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

我很想把它移到一个计算上——保持标记干净

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


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

【讨论】：

我个人很想将其移动到计算或方法中 - 我喜欢让标记相对干净 - 问题在我发布时已关闭，所以，不确定我可以更新到显示我的意思
Cannot read property 'sub_category' of undefined 当使用计算时。
可能是因为在某些时候，this.category 是空的 .... @SeadLab - 也许不要使用那个方法 - 我已经离开 vuejs 有一段时间了，可能有关于我不清楚你的数据

【解决方案2】：

elements.join(',')

你不需要为此创建一个函数，只需像这样在 Vue 标签中使用它

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

请签入图片。我检查后发布了答案。

【讨论】：

不工作。我已经试过很多次了
@SeadLab 您能否查看我添加的屏幕截图的更新答案。我希望这足以证明我的解决方案有效
我不是这个意思。这不一样。请检查上面的正确答案！