在网页上显示后端响应

Question

I'm new to this, please be kind!

How do I transfer the value of the object that was returned to me in the console to the webpage? As of now, the balance value is in the console but it is not displayed on the page.

edit: If I wish to display the objects in the console separately, do I use myObj.key? eg. I want to display the value of balance on the left and the value of block on the right of my webpage, do I use myObj.balance and myObj.block ?

attached a screenshot of my browser

This is my code, do guide me, thank you!

<template>
  <div class="box-card">
    <p class="title-text">余额</p>
    <p class="number-text">{{Balance}}</p>
  </div>
</template>


<script>
    export default {
    data() {
        return {
            userId: 0,
            // page config
            currentPage: 1,
            total: 0,
            pageSize: 20,
            userBalance: [],
            Balance: '',
        }
    },


    watch: {},
    mounted() {
        this.userId = this.$route.query["user_id"];
        this.userId = 41;
        this.getUserBalance();
        this.getUserIncomeRecord();
        console.log('hello');

    },

    methods: {
        pageChange(val) {
            this.currentPage = val;
        },

        getUserBalance() {
            Core.Api.User.getUserBalance(this.userId).then(res => {
             console.log(res);
              res == this.Balance;
            })
        },

      </script>

Answer 1

EDITED: If you want to print in a element with certain ID instead of console.log("WHAT YOU WANT TO PRINT") use this:

document.getlementById("YOUR ELEMENT ID HERE").innerHtml("WHAT YOU WANT TO PRINT");

If you use Jquery this is equivalent to the above code:

$("#ELEMENT ID HERE").html("WHAT YOU WANT TO PRINT");

Answer 2

make a slight change:

getUserBalance() {
            Core.Api.User.getUserBalance(this.userId).then(res => {
             console.log(res);
             this.Balance = res;
            })
        },