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

问题是数据正在显示，但 table 中没有。它显示在“app”之后 div.

附上输出截图。

Answer 1

如果混合了 Vue 组件和本机元素，则有 certain caveats 解析 DOM 模板。

Some HTML elements, such as <ul>, <ol>, <table> and <select> have restrictions on what elements can appear inside them, and some elements such as <li>, <tr>, and <option> can only appear inside certain other elements.

This will lead to issues when using components with elements that have such restrictions. For example:

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

The custom component will be hoisted out as invalid content, causing errors in the eventual rendered output.

在您的情况下，它导致您的 table 呈现 'above' header。实际上，浏览器在这种情况下创建了两个 tables：一个用于 <tr>s 替换提升的组件，另一个用于 'native' table 从一开始就存在于模板中.

幸运的是，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>

table 的 Vue js 简单组件不工作

Vue js simple component for table not working

vue.js

vue-component