CODEWITHSUNDEEP
vue.jstemplate-literals
Sean2014
Sean2014

Reputation: 531

Why doesn't the template literals enter a new line?

I'm currently writing some practice code that deals with cards information using Vue.js.

In the template part, it goes through the fetched object info by v-for loop, and then prints out the obtained information on the screen.

Because some of the contents in the info object are nested objects, I want to make sure that those objects are parsed and broken down to multiple lines, rather than printing them out as JSON object in a single line. So I wrote code like this. 

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

As stated in the documentation below, if you use template literals it should suffice to just write multiple lines between ` ` marks and they will be displayed as multiple lines.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

However, contrary to my expectation, both the cardAddress and expiration that I should have filtered via getData() method are actually displayed in single lines, just as shown in the below output. 

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 }

Could anyone tell me why this is happening?

*****UPDATED*****

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 }

*****UPDATED 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>

Upvotes: 1

Views: 1883

Answers (1)

Terry
Terry

Reputation: 66123

A new line in JS is not a new line in HTML: if you want to insert a newline in your HTML, you need to use the <br /> tag. The template literal simply allows you to break texts over multiple lines, and that does not translate to line breaks in HTML.

In order for HTML to be displayed as-is, you need to use v-html instead of using v-text or the handlerbars notation. An example is using a method that returns a string to do that:

<p v-if="detailedInfo" v-html="detailedInfoText"></p>

And then the method can be like:

methods: {
  detailedInfoText: function(index) {
    return `${index}: ${this.getData(index)}`;
  }
}

Even better: you don't need to use v-if and v-else, and let the method handle what string to output on its own:

<p v-html="detailedInfoText(detailedInfo)"></p>

And then in your JS logic:

methods: {
  detailedInfoText: function(detailedInfo, index) {
    if (detailedInfo) {
        return `${index}: ${this.getData(index}`;
    } else {
        return `${index}: NULL`;
    }
  }
}

Upvotes: 2

Related Questions