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:'[email protected]'},
                {id: 2, name:'Peter Drunket', email:'[email protected]'},
                {id: 3, name:'Mike Benjamin', email:'[email protected]'},
            ]
        }
    });        
</script>

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

附输出截图。

Answer 1

如果 DOM 模板混合了 Vue 组件和原生元素，则解析 DOM 模板时有某些警告。

一些 HTML 元素，例如

<ul>

、

<ol>

、

<table>

和

<select>

具有 对哪些元素可以出现在其中的限制，以及一些

<li>

、

<tr>

、

<option>

等元素只能出现在内部 某些其他元素。

当使用具有以下元素的组件时，这会导致问题 这样的限制。例如：

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

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

在您的情况下，它导致您的表格呈现在标题“上方”。实际上，在这种情况下，浏览器创建了两个表：一个用于

<tr>

替换提升的组件，另一个用于从一开始就存在于模板中的“本机”表。

幸运的是，

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: '[email protected]'
      },
      {
        id: 2,
        name: 'Peter Drunket',
        email: '[email protected]'
      },
      {
        id: 3,
        name: 'Mike Benjamin',
        email: '[email protected]'
      },
    ]
  }
});

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

Answer 2

这个解决方法也会对您有帮助

引入不执行任何操作的自定义表格组件：

    Vue.component('my-table', {
    props: [''],
    emits: [],
    mounted: function () {
    },
    data: function () {
        return {
        }
    },
    methods: {
    },

    template:
        '<table>' +
        '<slot></slot>' +
        '</table>'
})

只需使用此组件而不是本机“table”标签

<div id="app">
     <my-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>                    
     </my-table>
 </div>