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

Posted 2023-02-23

【中文标题】用于表格的Vue js简单组件不起作用

【英文标题】：Vue js simple component for table not working

【发布时间】：2021-09-04 07:51:54

【问题描述】：

我是 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:'[e-mail]',
                id: 2, name:'Peter Drunket', email:'[e-mail]',
                id: 3, name:'Mike Benjamin', email:'[e-mail]',
            ]
        
    );        
</script>

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

附上输出截图。

【参考方案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: '[e-mail]'
      ,
      
        id: 2,
        name: 'Peter Drunket',
        email: '[e-mail]'
      ,
      
        id: 3,
        name: 'Mike Benjamin',
        email: '[e-mail]'
      ,
    ]
  
);

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

【讨论】：

太棒了！多数民众赞成在解决问题。我是初学者，所以不知道使用 "is='somename'" 还是使用模板 标记本身是否是一种好习惯。

我想说最好的做法是避免使用 DOM 模板：如果您有整个表格的组件，您就不会遇到这个问题。看，Vue 解析器不读取 HTML，而是尝试从 DOM 获取信息。但是浏览器会尽力维护 DOM 应有的方式。因此上述的提升和类似的效果。