vue关于表格制作,小白问题,这个怎么改


<template>
  <div>我是测试页
  {{face}}</div>
  <div>
    <table border="1" cellspacing="1" cellpadding="1">
      <tr><th v-for="item in itemstitle",k:key="item">{{item}}</th></tr>
      <tr v-for="item in itemsvalue",k:key="item">
        <td>{{item.hours}}</td>
         <td>{{item.pass}}</td>
          <td>{{item.rej}}</td>
        </tr>
    </table>
  </div>
</template>

<script>
  export default {
    name: "PAGE2",
    data(){
      return{
        face:"测试",
        itemstitle:["name1","name2","name3"],
        itemsvalue:[{
          hours:"1",
          pass:"1-2",
          rej:"1-3"
        },{
          hours:"2",
          pass:"2-2",
          rej:"2-3"
        },{
          hours:"3",
          pass:"1-2",
          rej:"1-3"
        },]
      }
    },
  }
</script>

<style scoped>

</style>


这是错误提示


Failed to compile.

./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-51644a23","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/PAGE2.vue
(Emitted value instead of an instance of Error) 
  Error compiling template:
  
  <div>我是测试页
  {{face}}</div>
  <div>
    <table border="1" cellspacing="1" cellpadding="1">
      <tr><th v-for="item in items-title">{{item}}</th></tr>
      <tr v-for="item in items-value">
        <td>{{item.hours}}</td>
         <td>{{item.pass}}</td>
          <td>{{item.rej}}</td>
        </tr>
    </table>
  </div>
  
  - Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

 @ ./src/components/PAGE2.vue 11:0-361
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

img


不知道你要改的是什么 首先这外部得有一个div包起来 只能有一个节点 th不需要tr包起来

首先template中只能有一个根结点,即

<template>
<div>
  <div>我是测试页
  {{face}}</div>
  <div>
    <table border="1" cellspacing="1" cellpadding="1">
      <tr><th v-for="item in itemstitle",k:key="item">{{item}}</th></tr>
      <tr v-for="item in itemsvalue",k:key="item">
        <td>{{item.hours}}</td>
         <td>{{item.pass}}</td>
          <td>{{item.rej}}</td>
        </tr>
    </table>
  </div>
</div>
</template>