双引号中的 Vue 实例

Question

我使用 vue 实例但它没有解析，我认为问题与在 Metro.dialog.Create.content.

中使用双引号有关

这是主页包括 table 并且它有效 correctly.I 当 dblclick table 在主页上打开对话框时添加，另一个 table 显示在这个对话框中。

var app2= new Vue({
      el: '#appTable',
      data: {
          squads: [                
          ]
      },        
      mounted: function () {
          Metro.init();
          var self = this;
           $.ajax({
               url: '@Url.Action("Find", "Squad")',
               method: 'GET',
               success: function (data) {
                   self.squads = data;
               },                  
           });
      },
      methods:{
        clickList: function (squad) {
            bindSquadToEditTable(squad.ID);
            Metro.dialog.create({
                title: "Team",
                content:
                  '<div class ="row-4-3 rowspan" >'+
                     '<div id="appTableMembers">'+
                       '<table class="table cell-border ">'+
                         '<thead>'+
                            '<tr>'+
                            '<th>Personal Code</th>'+
                             '<th>Name</th>'+
                              '<th>Email</th>'+
                               '</tr>'+
                          '</thead>'+
                       '<tbody>'+
                       "<tr v-for=squad in members :key=squad.PersonalCode >  <td>{{squad.PersonalCode}}</td>  <td>{{squad.FullName}}</td> <td>{{squad.Email}}</td>"+
                        '</tr>'+
                        '</tbody>'+
                  '</table>'+
                 '</div>',
            });
        }
      }
  });

那是我的主页；

        <div id="appTable">
    <table class="table striped">
        <thead>
        <tr>
            <th>Code</th>
            <th>Description</th>
        </tr>
        </thead>
        <tbody>
            <tr v-for="squad in squads" :key="squad.Code" v-on:dblclick="clickList(squad)">
                <td>{{squad.Code}}</td> <td>{{squad.Description}}</td> 
            </tr>
        </tbody>
    </table>
    </div>

这是对话框的绑定数据；

   <script>
         function bindSquadToEditTable(ID){
              app3 = new Vue({
                  el: 'appTableMembers',
                  data: {
                      members:[]
                  },
                  mounted:function(){
                      Metro.init();
                      var self = this;
                      $.ajax({
                          type: "GET",
                          "url": '@Url.Action("FindByID", "Squad")',
                  "data": { id: ID },
                  "dataSrc": "",
                  success: function(data){
                      self.members = data;
                  },
              });
          }
       })
     }
  </script>

Answer 1

我很好奇这是如何工作的，所以我拼凑了一个 quick test。使用隐藏的 <div> 模态内容效果很好。

HTML

<html>
  <head>
    <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
  </head>

  <body>
    <div id="app">
      <input type="button" value="modal" @click="showModal" />
      <div style="display: none" ref="modalContent">
        <div>My name is {{name}}</div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
  </body>

</html>

Javascript

new Vue({
  el: "#app",
  data: {
        name: 'Sample User'
    },
  methods: {
    showModal: function() {
      Metro.dialog.create({
          title: "Modal Title",
          content: this.getModalContent
          });
    },
    getModalContent: function() {
        return this.$refs.modalContent.innerHTML;
    }
  }
});

Answer 2

我改变了我的看法，我将在脚本中实现模态；

<script type="text/template" id="data-input-form-template" >
            <label>Code</label>
            <input type="text" v-model="squad[0].Code"/> 

            <label>Name</label>
            <input type="text" v-model="squad[0].Name" />


            <label>Description</label>
            <textarea style="height:175px" v-model="squad[0].Description"></textarea>

        <div id="appTableMembers">
            <table class="cell-border" >
                <thead>
                    <tr>
                        <th>Personal Code</th>
                        <th>Adı</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="m in squad[0].members">
                        <td>{{m.PersonalCode}}</td>
                        <td>{{m.FullName}}</td>
                    </tr>
                </tbody>
            </table>
         </div>
</script>

这是我的 openDialog 函数；

function openDialog(ID) {       
     var html = $('#data-input-form-template').html();
     $('#data-input-form').html(html);
     app4 =  new Vue({
         el:'#data-input-form',
         data: function(){
             return {
                 squad: [{
                     members: []
                 }]
             }
         },
         mounted:function(){
             Metro.init();
             var self = this;
                 $.ajax({
                     type: "GET",
                     "url": '@Url.Action("FindByID", "Squad")',
                     "data": { id: ID },
                     "dataSrc": "",
                     success: function (data) {
                         self.squad = data;
                     },
                     error: function (error) {
                         alert(error);
                     }
                 });  
         }
     });
    Metro.dialog.open('#demoDialog1');       
}

主页html；

    <div class="dialog" data-role="dialog"  id="demoDialog1"> src="#" />
    <div class="dialog-content" style="height:400px">
        <form id="data-input-form">
        </form>
    </div>
</div>

双引号中的 Vue 实例

Vue instance in double quotes

metro-ui-css

vue.js

HTML

Javascript