Vue instance in double quotes

Question

I use vue instance but it is not parsing , i think problem is relevant with using double quotes in Metro.dialog.Create.content.

Here is the main page include table and it works correctly.I added when dblclick table on main page open dialog and another table showing in this dialog.

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>',
            });
        }
      }
  });

That is my Main page;

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

Here is the binding data to dialog ;

   <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

I change the my opinion and i will implement modal in the script;

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

And this my openDialog function;

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');       
}

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

Answer 2

I was curious how this would work so I threw together a quick test. Worked fine using the hidden <div> for the modal content.

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;
    }
  }
});