How to display a string value in template section in vue.js? - 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>admin#bookstore.com</p>
</div>
<div class="contact-sec">
<p>[phone]</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:'admin#bookstore.com',
adminMobNum:'[phone]',
orderNumber: ''
}
},
created() {
service.confirmMail().then(response =>
(this.orderNumber=JSON.stringify(response.data))
)
}
}
</script>

Answer 1

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

Answer 2

Just assign the orderID to the orderNumber:
service.confirmMail().then(response =>
(this.orderNumber=response.data.orderID)
)