Vue JS模板標簽未呈現

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>元素：

請注意，在Vue tables有點棘手，您不只是將組件插入表中，還使用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>