Question

我目前正在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。

Answer 1

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

Answer 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以上的浏览器不会有问题。

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

Vue JS模板标签未呈现

3 个答案: