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

Posted 2023-02-23

【中文标题】如何在 vue js 中显示以逗号分隔的库存中的内容？

【英文标题】：How can I able to display content in inventory seperated by commas in 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(',')

【参考方案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