Javascript 如何将名称显示格式转换为点格式？

大家好，我是javascript和vue js的新手。 我想问一下如何使名称以点形式显示

产品ID:{{props.item.Product_ID}}
产品名称：
{{props.item.title}


{{props.item.shop_name}
导出默认值{
数据（）{
返回{
加载：false，
标签：[]，
项目：[{
店铺名称：“”
}],
标题：[
{text:this.$translate（'product_being_promoted'），值：'product_id'，sortable:false}，
{text:this.$translate（'name'），值：'shop_name'，sortable:false}
],
}
}, 
安装的（）{
此文件为.getProductPromoteReport（）；
},
方法：{
getProductPromoteReport（）{
var self=这个；
这是真的
axios.get（“/api/merchant/live/getProductPromoteReport”）
。然后（响应=>{
self.labels=response.data.labels
此参数为0。加载=错误
})
},
缩略图（str）{
试一试{
返回str.split（“，”[0]
}捕获（e）{
返回
}
},
},
}
.动作图标>*{
左边距：15px；
光标：指针；
}
.可见真实{
颜色：红色；
}
.可见错误{
颜色：绿色；
}
.缩略图{
宽度：50px；
高度：50px；
}
.推广产品报告{
边缘顶部：15px；
}

我的预期结果是以以下格式显示名称：

• 回扣试验
• 瓦伦特228
• 斯坦利霍姆斯酒店

我尝试使用v-for方法显示名称列表，但失败。 我想知道还有什么别的解决办法吗？

---

如果你们中的任何人对此有解决方案，我们将不胜感激。谢谢。

您可以尝试拆分字符串商店名称，并循环它们：类似

替换

<td class="text-xs-left" >{{props.item.shop_name}}</td>   

{{props.item.shop_name}

与

{{namepart}

创建一个计算属性，该属性可以生成

标签的格式化版本

数据，并在数据表中使用

你也可以把它用在你的缩略图上

计算：{
格式化标签（）{
返回此.labels.map（label=>({
…标签，
店铺名称列表：label.shop\u name.split（/，\s*/），
productImage:label.productImage.split（'，'）[0]
}))
}
}

然后在你的模板中使用这个

{{name}

---

您可以使用

缩略图
方法跳过。
项目中的值是多少。商店名称
？它是一个字符串还是一个数组？@Phil Hi，stringAnd它到底是什么格式的？它总是以“
”、“
（逗号+空格）分隔吗？@Phil Ya，u是对的。即使这会产生所需的结果，数据实际上也应该以数组的形式返回，并被视为是真的。。但我有柠檬，所以让我们做柠檬水我知道“…标签”代表什么？“那有什么用呢？”贝基说。这就像说“所有
标签的属性，加上这两个被覆盖的属性…”我尝试了你的方法，但你的结果是这样的R-e-w-a-R-d-s-l-i-n-k有什么问题吗？？？贝基看上面。我有一个语法错误，你还必须在你的数据表中使用
formattedLabels
，我修改了它，结果什么都没有。
<td class="text-xs-left" >{{props.item.shop_name}}</td>   

<td class="text-xs-left" ><ul><li v-for="namepart in props.item.shop_name.split(', ')">{{namepart }}</li></ul></td>