Question

如何从数组中删除括号

2019-03-22

499

vue.js

因此，我有颜色框：绿色、蓝色、橙色和红色，当我将鼠标悬停在不同颜色上时，“detailsItem”会根据颜色框而变化。

它可以工作，但我只想知道，在浏览器中，它一直显示：[“rare”、“comfy”] 包含描述，如何删除 [“ ”]

因此，它只显示文本，例如：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>