我怎样才能在 vue js 中显示以逗号分隔的清单中的内容？

Question

我的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>

当我这样做的时候，数据是向下打印的。我需要在一行中以逗号分隔显示数据吗？？

Answer 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>

Answer 2

您可以使用 span 而不是像

这样的 div 来做到这一点

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

不幸的是，您将以逗号结束：-/

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

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

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

Answer 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

我怎样才能在 vue js 中显示以逗号分隔的清单中的内容？

How can I able to display content in inventory seperated by commas in vue js?

javascript

jquery

vue.js

vue-router

vue-component