用于表格的Vue js简单组件不起作用

Question

我是 vue js 的初学者。我正在尝试从官方 vue 文档中逐步学习。我试图了解组件功能并创建了以下代码：

 <div id="app">
     <table class="table">
         <tr>
            <td><strong>Name</strong></td>
            <td><strong>Email Address</strong></td>                        
         </tr>
         <contact-item v-for="item in contacts" v-bind:contact="item" v-bind:key="item.id"></contact-item>                    
     </table>
 </div>

这是从组件模板显示行数据的 javascript 代码。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    Vue.component('contact-item', {
        props: ['contact'],
        template: '<tr><td>{{ contact.name }}</td><td>{{ contact.email }}</td></tr>'
    })
    var app = new Vue({
        el: '#app',
        data: {
            contacts: [
                {id: 1, name:'John Doe', email:'John@Doe.com'},
                {id: 2, name:'Peter Drunket', email:'Peter@Drunket.com'},
                {id: 3, name:'Mike Benjamin', email:'Mike@Benjamin.com'},
            ]
        }
    });        
</script>

问题是数据正在显示但不在表格中。它显示在“app”div之后。

附上输出截图。

Answer 1

certain caveats 可以解析 DOM 模板，如果这些模板混合了 Vue 组件和原生元素。

一些 HTML 元素，例如 <ul>、<ol>、<table> 和 <select> 限制哪些元素可以出现在其中，以及一些 <li>、<tr>、<option>等元素只能出现在里面 某些其他元素。

这将导致在使用具有以下元素的组件时出现问题 这样的限制。例如：

<table>
  <blog-post-row></blog-post-row>
</table> 

自定义组件将被吊出为无效 内容，导致最终呈现的输出出现错误。

在您的情况下，它导致您的表格呈现在标题“上方”。实际上，浏览器在这种情况下创建了两个表：一个用于替换被提升组件的<tr>s，另一个用于从一开始就存在于模板中的“本机”表。

幸运的是，is 特殊属性提供了一种解决方法。您需要指定要用于替换特定本机元素的组件的名称。两次指定该元素的名称不太方便（首先在 HTML 中，然后在组件本身中），但是，正如人们所说，这是一种解决方法。

<table>
  <tr is="blog-post-row"></tr>
</table>

您的情况如下所示：

Vue.component('contact-item', {
  props: ['contact'],
  template: '<tr><td>{{ contact.name }}</td><td>{{ contact.email }}</td></tr>'
})
var app = new Vue({
  el: '#app',
  data: {
    contacts: [{
        id: 1,
        name: 'John Doe',
        email: 'John@Doe.com'
      },
      {
        id: 2,
        name: 'Peter Drunket',
        email: 'Peter@Drunket.com'
      },
      {
        id: 3,
        name: 'Mike Benjamin',
        email: 'Mike@Benjamin.com'
      },
    ]
  }
});

<div id="app">
  <table class="table">
    <tr>
      <td><strong>Name</strong></td>
      <td><strong>Email Address</strong></td>
    </tr>
    <tr is="contact-item" v-for="item in contacts" v-bind:contact="item" v-bind:key="item.id"></tr>
  </table>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>