如何在 vue js 中显示以逗号分隔的库存中的内容？答案

【问题标题】：How can I able to display content in inventory seperated by commas in vue js?如何在 vue js 中显示以逗号分隔的库存中的内容？
【发布时间】：2018-04-25 20:01:00
【问题描述】：

我的json数据是

{ "status": true,
  "data": {
    "pid": 9,
    "Name": "Asok",
    "services": "3, 1, 2, 4, 5, 6",
    "inventory": ["specs", " Testing", "Lens", "Doctors", "Surgeon", "Medicines"]
  }
}

现在我用html作为

<div v-for="inv in data.inventory">{{inv}}</div>

当我这样做时，数据正在向下打印..我需要连续显示用逗号分隔的数据？？

【问题讨论】：

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

标签： javascript jquery vue.js vue-component vue-router

【解决方案1】：

您的标签的display 必须合适，因为div 是block，意味着它将获得行的整个宽度。所以下一个元素将放在它下面。默认情况下，您可以使用span 标签来代替div，将值逐个设置。或者您需要更改当前div 元素的display 属性。

<div>
   <span v-for="inv in data.inventory">{{inv}}</span>
</div>

让我用jQuery来展示例子，而不是vue.js，但逻辑是一样的，不是vue或jquery-s的问题。

const obj = { "status": true,
  "data": {
    "pid": 9,
    "Name": "Asok",
    "services": "3, 1, 2, 4, 5, 6",
    "inventory": ["specs", " Testing", "Lens", "Doctors", "Surgeon", "Medicines"]
  }
};

let str = '';

obj.data.inventory.forEach(ivt => {
  str += `<div>${ivt}</div>`;
});

$('#myFirstDiv').html(str);
str = '';

obj.data.inventory.forEach(ivt => {
  str += `<span>${ivt}</span>`;
});

$('#mySecondDiv').html(str);
str = '';

obj.data.inventory.forEach(ivt => {
  str += `<div class='inline-block'>${ivt}</div>`;
});

$('#myThirdDiv').html(str);

div.inline-block {
   display: inline-block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
With divs
<div id='myFirstDiv'>

</div>
<br/>
With spans
<div id='mySecondDiv'>

</div>
<br/>
With changed display
<div id='myThirdDiv'>

</div>

【讨论】：

【解决方案2】：

你可以通过使用 span 而不是 div 来做到这一点

<span v-for="inv in data.inventory">{{inv}}, </span>

不幸的是，你最终会得到一个逗号：-/

也许这是您应该进行一些 JS 预处理并保持模板简单的情况之一，例如：

<div>{{data.inventory.join(', ')}}</div>

这将毫不费力地解决尾随逗号问题。

【讨论】：

【解决方案3】：

div 是块元素，因此请使用内联元素，例如 span。至于逗号，在除最后一个之外的所有元素上都加上，例如：

<div>
   <span v-for="inv, index in data.inventory" v-if="index != data.inventory.length - 1">{{inv}},</span>
   <span v-else>{{inv}}</span>
</div>

Working fiddle

【讨论】：