在html内部调用的Javascript模板

Question

我有下面的代码来显示时间轴模式。点击调用时使用：

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

如何将其作为页面的一部分显示在页面上，而不是作为模态打开？我希望在该页面上始终可见，而不是单击菜单查看它作为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 1

看起来stackoverflow已经今非昔比了。我想没有人再访问那个网站了。必须从我的收藏夹中删除一个死网站。因为我在这里找到的大多数解决方案都是几年前的。真遗憾。它曾经是有用的