我目前正在编写一些练习代码，这些练习代码使用Vue.js处理卡信息。
在模板部分中，它通过v-for循环经过获取的对象info，然后在屏幕上打印出获得的信息。
由于info对象中的某些内容是嵌套对象，因此我想确保将这些对象解析并分解为多行，而不是将它们作为JSON对象打印在一行中。所以我写了这样的代码。
<template>
<div id="info-child">
<div v-for="(detailedInfo,index) in info" :key="index">
<p v-if="detailedInfo"> {{index}} : {{ getData(index) }} </p>
<p v-else> {{index}} : NULL </p>
</div>
</div>
</template>
<script>
export default {
props: {
info: Object
},
methods: {
getData(index) {
var info = this.info;
var str = '';
switch(index){
case 'cardAddress':
str = `address1: ${info.cardAddress.address1}
address2: ${info.cardAddress.address2}
address3: ${info.cardAddress.address3}
address4: ${info.cardAddress.address4}
city: ${info.cardAddress.city}
country: ${info.cardAddress.country}
region: ${info.cardAddress.region}
zipCode: ${info.cardAddress.zipCode}
`
return str;
case 'expiration':
str = `year: ${info.expiration.year}
month: ${info.expiration.month}`
return str;
}
return this.info[index];
}
}
}
</script>
如下面的文档所述，如果您使用模板文字，则只需在` `标记之间写多行就足够了，它们将显示为多行。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
但是，与我的预期相反，我本应通过cardAddress方法进行过滤的expiration和getData()实际上都以单行显示，如以下输出所示。
accountId : 3917774
id : 3919374
customerId : 996774
cardRole : MAIN
cardStatus : CARD_OK
truncatedCardNumber : 524304______5314
cardTemplate : MC_CARD
cardAddress : address1: Asagayaminami 1- chome address2: null address3: null address4: null city: Tokyo country: JPN region: null zipCode: 1660004
usageLimits : [ { "code": "WEEKLY", "values": null }, { "code": "DAILY", "values": [ { "code": "ATM", "singleAmount": 200, "count": 3, "sumAmount": 300 } ] }, { "code": "MONTHLY", "values": [ { "code": "ATM", "singleAmount": null, "count": 1000, "sumAmount": 1000000 } ] } ]
expiration : year: 2022 month: 1
pinAddress : { "address1": "Asagayaminami 1- chome", "address2": null, "address3": null, "address4": null, "city": "Tokyo", "country": "JPN", "region": null, "zipCode": "1660004" }
regionAndEcommBlocking : { "ecomm": false, "africa": false, "asia": false, "europe": false, "home": false, "northAmerica": false, "oceania": false, "southAmerica": false }
有人可以告诉我为什么会这样吗？
*****更新*****
case 'cardAddress':
str = `address1: ${info.cardAddress.address1} <br />
address2: ${info.cardAddress.address2} <br />
address3: ${info.cardAddress.address3} <br />
address4: ${info.cardAddress.address4} <br />
city: ${info.cardAddress.city} <br />
country: ${info.cardAddress.country} <br />
region: ${info.cardAddress.region} <br />
zipCode: ${info.cardAddress.zipCode} <br />
`
return str;
case 'expiration':
str = `year: ${info.expiration.year} <br />
month: ${info.expiration.month}`
return str;
accountId : 3917774
id : 3919374
customerId : 996774
cardRole : MAIN
cardStatus : CARD_OK
truncatedCardNumber : 524304______5314
cardTemplate : MC_CARD
cardAddress : address1: Asagayaminami 1- chome <br /> address2: null <br /> address3: null <br /> address4: null <br /> city: Tokyo <br /> country: JPN <br /> region: null <br /> zipCode: 1660004 <br />
usageLimits : [ { "code": "WEEKLY", "values": null }, { "code": "DAILY", "values": [ { "code": "ATM", "singleAmount": 200, "count": 3, "sumAmount": 300 } ] }, { "code": "MONTHLY", "values": [ { "code": "ATM", "singleAmount": null, "count": 1000, "sumAmount": 1000000 } ] } ]
expiration : year: 2022 <br /> month: 1
pinAddress : { "address1": "Asagayaminami 1- chome", "address2": null, "address3": null, "address4": null, "city": "Tokyo", "country": "JPN", "region": null, "zipCode": "1660004" }
regionAndEcommBlocking : { "ecomm": false, "africa": false, "asia": false, "europe": false, "home": false, "northAmerica": false, "oceania": false, "southAmerica": false }
*****更新2 *****
<template>
<div id="info-child">
<div v-for="(detailedInfo,index) in info" :key="index">
<p v-bind:html="detailedInfoText(detailedInfo, index)"></p>
</div>
</div>
</template>
<script>
export default {
props: {
info: Object
},
methods: {
getData(index) {
console.log('getData got called');
var info = this.info;
var str = '';
switch(index){
case 'cardAddress':
str = `address1: ${info.cardAddress.address1} <br>
address2: ${info.cardAddress.address2} <br>
address3: ${info.cardAddress.address3} <br>
address4: ${info.cardAddress.address4} <br />
city: ${info.cardAddress.city} <br />
country: ${info.cardAddress.country} <br />
region: ${info.cardAddress.region} <br />
zipCode: ${info.cardAddress.zipCode} <br />
`
console.log('The string to be returned: ' + str);
return str;
case 'expiration':
str = `year: ${info.expiration.year} <br />
month: ${info.expiration.month}`
console.log('The string to be returned: ' + str);
return str;
}
console.log('The string to be returned: ' + this.info[index]);
return this.info[index];
},
detailedInfoText(detailedInfo, index){
console.log('detailedInfoText got called');
console.log('detailedInfo: ' + detailedInfo);
console.log('index: ' + index);
if(detailedInfo){
console.log('if statement is true');
return `${index}: ${this.getData(index)}`;
} else {
console.log('if statement is false');
return `${index}: NULL`;
}
}
}
}
</script>
答案 0 :(得分：1)
JS中的新行不是HTML中的新行：如果要在HTML中插入换行，则需要使用<br />标签。模板字面量仅允许您将文本分成多行，而不会转换为HTML中的换行符。
要使HTML原样显示，您需要使用v-html而不是v-text或handlerbars表示法。一个示例使用的是返回字符串的方法来做到这一点：
<p v-if="detailedInfo" v-html="detailedInfoText"></p>
然后方法可以像：
methods: {
detailedInfoText: function(index) {
return `${index}: ${this.getData(index)}`;
}
}
甚至更好：您不需要使用v-if和v-else，并且让该方法自行处理要输出的字符串：
<p v-html="detailedInfoText(detailedInfo)"></p>
然后在您的JS逻辑中：
methods: {
detailedInfoText: function(detailedInfo, index) {
if (detailedInfo) {
return `${index}: ${this.getData(index}`;
} else {
return `${index}: NULL`;
}
}
}