[Vuejs]-How can I able to display content in inventory seperated by commas in vue js?

by

2👍

✅

div is a block element so use a inline one, like span. As for commas, add it on all elements except the last one, for example:

<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

1👍

You can do that by using span instead of div like

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

Unfortunately, you will end up with a trailing comma :-/

Maybe this is one of those cases where you should do some JS-preprocessing and keep the template simple, like:

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

This will solve the trailing comma problem without much effort.

0👍

Your tag’s display must be appropriate, for div it is a block, means that it will get the whole width of the row. So the next element will be placed under it. Instead of div you can use span tag to by default set the values after each other. Or you need to change the display property of current div element.

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

Let me show the examples with jQuery, not vue.js, but the logic is the same, its not the vue’s or jquery-s problem.

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>

Leave a comment