Vue js模板标签未呈现答案

【问题标题】：Vue js template tag not renderingVue js模板标签未呈现
【发布时间】：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" :alt="company.name" />
        </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。

标签： javascript html vue.js

【解决方案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>

【讨论】：