vue js에서 쉼표로 구분 된 인벤토리의 콘텐츠를 어떻게 표시 할 수 있습니까?

Question

내 JSON 데이터가 내가 이런 식으로 작업을 수행 할 때

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

는, 데이터가 아래로 인쇄 될 때 HTML을 사용하고 지금

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

입니다 .. 나는 연속 commmas로 구분 된 데이터를 표시해야 ??

Answer 1

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

Answer 2

귀하의 태그는 display이어야하며 div은 block입니다. 이는 행의 전체 너비를 확보한다는 의미입니다. 그래서 다음 요소가 그 아래에 배치됩니다. div 대신 span 태그를 사용하여 기본적으로 서로 값을 설정할 수 있습니다. 또는 현재 div 요소의 display 속성을 변경해야합니다.

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

내가 jQuery를하지 vue.js와 예제를 보여 드리겠습니다,하지만 논리는하지 VUE 나 JQuery와-의 문제와 동일합니다.

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 3

당신은 불행하게도 범위 대신 사업부를 사용하여 같은

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

, 당신은 뒤에 콤마로 끝날 것이라고 할 수있다 : -/

어쩌면이 JS- 사전 처리를 수행하고 템플릿을 간단하게 유지해야하는 경우 중 하나입니다.

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

이렇게하면 많은 노력없이 쉼표 문제를 해결할 수 있습니다.