How to display a string value in template section in vue.js?

Question

I developed one page which is responsible for showing order success message and i am getting response from backend which contains orderId ,i am getting that response and i am able to bind in front end but i am getting my output as a json format in my UI page ,but what i need is to display only orderID value only (like a string).please help me to fix this issue...

i want to display orderID value only

OrderPlace.vue

<template>
<div class="order-place">
    <div class="image-container">
        <img src="../assets/success.png" alt="not found" />

    </div>
    <div class="title-container">
        <p>Order placed Successfully</p>
    </div>
    <div class="message-section">
        <p>Hurray!!!your order is confirmed and placed successfully contact us in below details
            for further communication..</p>
    </div>
    <div class="order-id">
          
            {{orderNumber}}
           
            
        </div>
    <div class="title-section">
        <div class="email-us">
            <p>Email-us</p>
        </div>
        <div class="contact-us">
            <p>Contact-us</p>
        </div>
        <div class="address">
            <p>Address</p>
        </div>
    </div>
    <div class="email-sec">
        <p>[email protected]</p>
    </div>
    <div class="contact-sec">
        <p>+918163475881</p>
    </div>
    <div class="address-sec">
        42, 14th Main, 15th Cross, Sector 4 ,opp to BDA complex, near Kumarakom restaurant, HSR Layout, Bangalore 560034
    </div>
    <div class="button">
        <router-link to="/dashboard" class="btn">Continue Shopping</router-link>
    </div>
</div>
</template>

<script>
import service from '../service/User';
// import { EventBus } from "./event-bus.js"; 
export default {
    name: 'OrderPlace',
    
    data(){
        return{
            successTitle:'Order placed Successfully',
            adminEmailSection:'Email-us',
            adminContactSection:'Contact-us',
            adminAddressSection:'Address',
            adminEmail:'[email protected]',
            adminMobNum:'+918163475881',
            orderNumber: ''
        }        
    },
   created() {
        service.confirmMail().then(response =>            
            (this.orderNumber=JSON.stringify(response.data))
        )
    } 
}
</script>

Braks · Accepted Answer · 2021-07-16 15:09:01Z

3

You're stringifying an Object of { message: string; orderId: number } which of course will result in that "string" of an Object being displayed when you use

<div class="order-id">
  {{orderNumber}}
</div>

Like Boussadjra said just assign the id to the corresponding data field

service.confirmMail().then(response =>            
        (this.orderNumber=response.data.orderId)
    )

answered Jul 16, 2021 at 15:09

Braks

6494 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wai Ha Lee · Accepted Answer · 2021-07-16 20:53:08Z

2

Just assign the orderID to the orderNumber:

    service.confirmMail().then(response =>            
        (this.orderNumber=response.data.orderID)
    )

edited Jul 16, 2021 at 20:53

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Jul 16, 2021 at 15:07

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Collectives™ on Stack Overflow

How to display a string value in template section in vue.js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related