Question

所以我有一个颜色框：绿色，蓝色，橙色和红色，当我将鼠标悬停到其他颜色时，颜色框的“ detailsItem”更改。

它正在工作，但是我只想知道，在浏览器中，它一直显示：[“ rare”，“ comfy”]包含说明，如何删除[“”]

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

 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>

如何从数组中删除括号

1 个答案: