Showing table heading once in VueJS component-CodePudding

I have a search built in VueJS and the results of the search are displayed in a separate component. I want to display the data in a table with the table headings. The issue I'm having is that the table heading appears before each row. How do I get it to appear once? Im sure this is easy but I cant think how to do this. Im fairly new to Vue, so any help appreciated.

<table  id="simpleTable">
      <thead>
        <tr>
          <th
            v-on:click="sortTable(title)"
            :key="title"
            scope="col"
            
          >
            Course
          </th>
          <div
            
            v-if="title == sorttitle"
            v-bind:
          ></div>
          <th scope="col">Award</th>
          <th scope="col">Level</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td >
            {{ title }}
          </td>

          <td>
            {{ award }}
          </td>
          <td >
            {{ level }}
          </td>
          <td >
            <a
              :href="result.displayUrl"
              
              role="button"
            >
              <span >Read more about {{ title }}</span> Read
              more</a
            >
          </td>
        </tr>
      </tbody>
    </table>

CodePudding user response：

You need to separate row from tbody to component. And do v-for only on this component and not on the entire table. It will be look like:

<table  id="simpleTable">
  <thead>
    <tr>
      <th
        v-on:click="sortTable(title)"
        :key="title"
        scope="col"
        
      >
        Course
      </th>
      <div
        
        v-if="title == sorttitle"
        v-bind:
      ></div>
      <th scope="col">Award</th>
      <th scope="col">Level</th>
    </tr>
  </thead>
  <tbody>
    <rowComponent v-for="rowData in tableData" :row="rowData"></rowComponent>
  </tbody>
</table>

And RowComponent will look like:

<td >
        {{ row.title }}
      </td>

      <td>
        {{ row.award }}
      </td>
      <td >
        {{ row.level }}
      </td>
      <td >
        <a :href="row.displayUrl"
          
          role="button">
          <span >Read more about {{ row.title }}</span> Read
          more</a>
</td>

<script>
  export default {
    name: "rowComponent",
    props: ['row']
  }
</script>