Javascript template called inside html

I have the below code to show a timeline modal. It’s called on click using:

<a class="dropdown-item" href="javascript:;" @click="orderHistory" ><?php echo t("Timeline")?></a>  

How can I show it on my page as part of the page, not opening as a modal? I want to be always visible on that page instead of clicking on a menu to see it Any help will be much appreciated as pretty much a newbie on javascript

const ComponentsOrderHistory = {
props: ['ajax_url','label','order_uuid'],
data(){
    return {               
       is_loading : false,  
       //order_uuid : '',
       data : [],
       order_status : [],
       error : []
    };
},
methods :{
    show(){         
        this.data = []; this.order_status = [];
        $( this.$refs.history_modal ).modal('show');
        this.getHistory();
    },
    close(){
        $( this.$refs.history_modal ).modal('hide');
    },
    getHistory(){
        this.is_loading = true;
        axios({
           method: 'put',
           url: this.ajax_url+"/getOrderHistory",
           data : {
             'YII_CSRF_TOKEN':$('meta[name=YII_CSRF_TOKEN]').attr('content'),
             'order_uuid' : this.order_uuid,
           },
           timeout: $timeout,
         }).then( response => {  
             if(response.data.code==1){             
                this.data = response.data.details.data;
                this.order_status = response.data.details.order_status;
                this.error = [];
             } else {
                this.error = response.data.msg;
                this.data = [];
                this.order_status = [];
             }
         }).catch(error => {    
            //
         }).then(data => {               
             this.is_loading = false;
         });
    },
},
template: ` 
<div ref="history_modal" class="modal" tabindex="-1" role="dialog" >
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">{{label.title}}</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body position-relative">
  
  <div v-if="is_loading" class="loading cover-loader d-flex align-items-center justify-content-center">
    <div>
      <div class="m-auto circle-loader medium" data-loader="circle-side"></div> 
    </div>
  </div>
  
  <ul class="timeline m-0 p-0 pl-5">
    <li  v-for="item in data" >
      <div class="time">{{item.created_at}}</div>
       <p v-if="order_status[item.status]" class="m-0">{{order_status[item.status]}}</p>
       <p v-else class="m-0">{{item.status}}</p>
       <p class="m-0 text-muted">{{item.remarks}}</p>
       <p v-if="item.change_by" class="m-0 text-muted">{{item.change_by}}</p>
    </li>        
  </ul>
  
  <div id="error_message" v-if="error.length>0" class="alert alert-warning mb-2" role="alert">
    <p v-cloak v-for="err in error" class="m-0">{{err}}</p>     
  </div>  
  
  </div>      
  <div class="modal-footer">            
    <button type="button" class="btn btn-green pl-4 pr-4"  data-dismiss="modal">
      <span>{{label.close}}</span>          
    </button>
  </div>
  
</div>

………………………………………………………………………………………………………………………………………………………………….

Answer

Looks like stackoverflow is not what once was. I guess no one’s visiting that site anymore. Must remove a dead website from my favourites then. As most of the solutions I found here was from years ago. That’s a shame. It was useful once upon a time