在 html 中调用的 Javascript 模板答案

【问题标题】：Javascript template called inside html在 html 中调用的 Javascript 模板
【发布时间】：2022-08-07 02:06:13
【问题描述】：

我有以下代码来显示时间线模式。它在点击时调用：

<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>

..................................................... ..................................................... ..................................................... .....................................

标签： javascript html

【解决方案1】：

看起来stackoverflow已经不是以前的样子了。我想没有人再访问那个网站了。然后必须从我的收藏夹中删除一个死网站。因为我在这里找到的大多数解决方案都是几年前的。真可惜。曾经很有用

【讨论】：