如何从数组中删除括号

Question

所以我有彩盒：绿色，蓝色，橙色和红色，当我鼠标移到不同的颜色时，“细节项目”会改变颜色框。

它工作正常，但我想知道，在浏览器中，它一直显示：[“罕见”，“舒适”]包含说明，如何删除[“”]

所以它只显示文本，例如：稀有，舒适。

 el: "#app",
  data: {
    variants: [
        {
          variantDetails: ["soft", "cheap"]
        },
        {
          variantDetails: ["rare", "comfy"]
        },
    ],
},

 computed: {
    detailsItem: function () {
      return this.variants[this.selectedVariant].variantDetails
    }
  }

.color-box {
  width: 40px;
  height: 40px;
  margin-top: 5px;
  display: inline-block;
  margin-right: 10px;
}

<p>Description: {{detailsItem}}</p>


<div v-for="(variant, index) in variants" class="color-box" v-on:mouseover="updateProduct(index)">
</div>

Answer 1

在detailsItem中返回时，将数组作为字符串加入。

detailsItem: function () {
  return this.variants[this.selectedVariant].variantDetails.join(', ')
}

您也可以在模板中执行此操作（假设detailsItem保持不变）：

<p>Description: {{ detailsItem.join(', ') }}</p>