title: Javascript template called inside html
body: <p>I have the below code to show a timeline modal.
  It's called on click using:</p>
  <pre><code>&lt;a class=&quot;dropdown-item&quot; href=&quot;javascript:;&quot; @click=&quot;orderHistory&quot; &gt;&lt;?php echo t(&quot;Timeline&quot;)?&gt;&lt;/a&gt;  
  </code></pre>
  <p>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</p>
  <pre><code>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+&quot;/getOrderHistory&quot;,
             data : {
               'YII_CSRF_TOKEN':$('meta[name=YII_CSRF_TOKEN]').attr('content'),
               'order_uuid' : this.order_uuid,
             },
             timeout: $timeout,
           }).then( response =&gt; {  
               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 =&gt; {    
              //
           }).then(data =&gt; {               
               this.is_loading = false;
           });
      },
  },
  template: ` 
  &lt;div ref=&quot;history_modal&quot; class=&quot;modal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; &gt;
  &lt;div class=&quot;modal-dialog modal-dialog-centered modal-dialog-scrollable&quot; role=&quot;document&quot;&gt;
  &lt;div class=&quot;modal-content&quot;&gt;
    &lt;div class=&quot;modal-header&quot;&gt;
      &lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;{{label.title}}&lt;/h5&gt;
      &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
        &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;modal-body position-relative&quot;&gt;
    
    &lt;div v-if=&quot;is_loading&quot; class=&quot;loading cover-loader d-flex align-items-center justify-content-center&quot;&gt;
      &lt;div&gt;
        &lt;div class=&quot;m-auto circle-loader medium&quot; data-loader=&quot;circle-side&quot;&gt;&lt;/div&gt; 
      &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;ul class=&quot;timeline m-0 p-0 pl-5&quot;&gt;
      &lt;li  v-for=&quot;item in data&quot; &gt;
        &lt;div class=&quot;time&quot;&gt;{{item.created_at}}&lt;/div&gt;
         &lt;p v-if=&quot;order_status[item.status]&quot; class=&quot;m-0&quot;&gt;{{order_status[item.status]}}&lt;/p&gt;
         &lt;p v-else class=&quot;m-0&quot;&gt;{{item.status}}&lt;/p&gt;
         &lt;p class=&quot;m-0 text-muted&quot;&gt;{{item.remarks}}&lt;/p&gt;
         &lt;p v-if=&quot;item.change_by&quot; class=&quot;m-0 text-muted&quot;&gt;{{item.change_by}}&lt;/p&gt;
      &lt;/li&gt;        
    &lt;/ul&gt;
    
    &lt;div id=&quot;error_message&quot; v-if=&quot;error.length&gt;0&quot; class=&quot;alert alert-warning mb-2&quot; role=&quot;alert&quot;&gt;
      &lt;p v-cloak v-for=&quot;err in error&quot; class=&quot;m-0&quot;&gt;{{err}}&lt;/p&gt;     
    &lt;/div&gt;  
    
    &lt;/div&gt;      
    &lt;div class=&quot;modal-footer&quot;&gt;            
      &lt;button type=&quot;button&quot; class=&quot;btn btn-green pl-4 pr-4&quot;  data-dismiss=&quot;modal&quot;&gt;
        &lt;span&gt;{{label.close}}&lt;/span&gt;          
      &lt;/button&gt;
    &lt;/div&gt;
    
  &lt;/div&gt;
  </code></pre>
    
    
  <p>........................................................................................................................................................................................</p>