Vue js模板标签未呈现

Posted 2023-02-22

【中文标题】Vue js模板标签未呈现

【英文标题】：Vue js template tag not rendering

【发布时间】：2019-04-01 16:12:00

【问题描述】：

我目前正在 Vue.js 中开发一个组件，它用模板标签包装了一个 tr 标签。

这是组件的代码：

Vue.component('Company', 
  name: 'Company',
  components: 
    CompanyAnalytics
  ,
  props: 
    company: 
      required: true,
      type: Object
    
  ,
  data () 
    return 
      showAnalytics: false
    
  ,
  template: `
    <template>
      <tr>
        <td class="mp-company-logo">
          <img :src="company.image" : />
        </td>
        <td>
           company.name 
        </td>
        <td>
           company.sharedDiamonds 
        </td>
        <td>
          <button class="btn btn-small btn-info">
            View
          </button>
        </td>
        <td>
          <button class="btn btn-small btn-primary">
            Edit
          </button>
        </td>
        <td>
          <label class="switch">
            <input type="checkbox" />
            <span class="slider round"></span>
          </label>
        </td>
      </tr>
    </template>    
  `
)

现在，这段代码根本不渲染。当我在浏览器中查看 devtools 时，我看到：

当我删除 template 标记并将tr 标记保留为根元素时，一切正常。

问题是，我需要渲染 2 个tr 标签，但我不能将它们包装在一个 div 中。我需要template 标签才能正常显示。

我尝试在我拥有的其他组件中使用template 标签，它们工作正常。具体来说，在这种情况下，template 标记不会呈现任何内容。

顺便说一句，我使用的是 Vue.js 的 CDN。

【问题讨论】：

看看vue-fragment。

【参考方案1】：

如果你想要两个 tr 你必须在父组件中调用组件两次，但是你不能在一个组件中有多个根元素。只需删除模板标签，将 tr 作为根，并根据需要多次调用组件

【参考方案2】：

可能最纯粹的解决方法就是诚实地使用另一个 <t-body> 元素：

请注意，tables 在 Vue 中有点棘手，您不只是将组件插入到表格中，而是在 html 元素上使用 is 属性并传递组件名称，这样的事情应该可以工作：

<tbody is="company"></tbody>

现在将组件中的template 更改为t-body，您的表格现在看起来像这样：

<tbody is="company"></tbody>
<tbody>
  // the rest of your rows go here
</tbody>

您也可以将tbody 元素相互嵌套，它不一定是有效的 HTML，但 IE 10 以上的浏览器不会有问题。

【参考方案3】：

我认为@Ohgodwhy 的回答是最好的。 如果你绝对需要有效的 html，你也可以在 td 里面放一个表格

https://codepen.io/sqram/pen/Jmzeyr

Vue.component('company', 
  name: "company",
  data () 
    return 
      companies: [
         name: 'ford', country: 'us' ,
         name: 'fiat', country: 'it'
      ]
    
  ,
  template:`
      <table>
        <tr v-for="c in companies">
          <td> c.name </td>
          <td> c.country </td>
        </tr> 
      </table>`
)

new Vue(
  el: '#app'
);


<div id="app">
  <table border="1">
    <tr>
      <td>
        <company />
      </td>
    </tr>    
  </table>
</div>