[英]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
我希望始终在该页面上可见,而不是单击菜单查看它任何帮助将不胜感激,因为 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">×</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>
........................................................................................................................................................................................ ..................................................... ..................................................... ..................................................... .....................................
Looks like stackoverflow is not what once was.看起来stackoverflow已经不是以前的样子了。 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
曾经很有用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.