双引号中的 Vue 实例答案

【问题标题】：Vue instance in double quotes双引号中的 Vue 实例
【发布时间】：2018-04-16 20:23:12
【问题描述】：

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

这是主页包含的表格，它可以正常工作。我在主页打开对话框中添加了 dblclick 表格，并在此对话框中显示另一个表格。

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>

【问题讨论】：

你能澄清一下“不解析”是什么意思吗？您是否在某处遇到错误？如果是这样，错误是什么，它发生在哪里？此外，在第二段中，您声明“它工作正常”，因此不清楚您的问题是什么。
我有 2 张桌子。主页中的第一个表和对话框中的第二个表。第一个表正常工作，当 dblclick 此表打开对话框并显示第二个表时。但显示第二个表行，如 {{squad.PersonalCode}} 所以我写了解析问题。另外，我没有收到任何错误。
我的猜测是 Vue 控制着 DOM，但是你给你的对话框提供了基于字符串的 HTML——不是来自 DOM，所以 Vue 无法控制它。有什么办法可以将对话框的 HTML 放在隐藏的 div 中？这会让 Vue 管理它，但您可以将对话框指向该 DOM 节点而不是原始 HTML。
是的，我也猜到了，我会应用它。

标签： vue.js metro-ui-css

【解决方案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;
    }
  }
});

【讨论】：

谢谢你的方法。我实现了一点不同。我应该在这里添加我的解决方案吗？
@JohnConnor 当然，将其添加为附加答案。有选择总是好的！ :)

【解决方案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>

【讨论】：