2017-02-12 57 views
0

我试图迭代通过Vue实例的数据部分中定义的数组,因此表头可以自动确定。但是,当我跑的代码,控制台输出率为:Vue.js 2.x v-for在<table>不工作(属性或方法未定义)

console output

下面的代码(js文件合并):

<!DOCTYPE html> 
 
    <html lang="en"> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     <title>Vue Demo</title> 
 
     <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> 
 
     <script src="http://unpkg.com/vue/dist/vue.js"></script> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
      <div class="row clearfix"> 
 
       <div class="col-md-12 column"> 
 
        <h3> 
 
         Staffs 
 
        </h3> 
 
        <table id="mytable" class="table table-hover"> 
 
         <thead> 
 
          <tr> 
 
           <th v-for:"term in items"> 
 
           {{term}} 
 
           </th> 
 
          </tr> 
 
         </thead> 
 
         <tbody> 
 
          <tr> 
 
           <td>6556</td> 
 
           <td> 
 
            TB - Monthly 
 
           </td> 
 
           <td> 
 
            01/04/2012 
 
           </td> 
 
           <td> 
 
            Default 
 
           </td> 
 
          </tr> 
 
         </tbody> 
 
        </table> 
 
       </div>   
 
      </div> 
 
      <div class="row clearfix"> 
 
       <div class="col-md-8 column"> 
 
        <ul class="pagination"> 
 
         <li> 
 
          <a href="#">Prev</a> 
 
         </li> 
 
         <li v-for="n in 5"> 
 
          <a href="#">{{n}}</a> 
 
         </li>       
 
         <li> 
 
          <a href="#">Next</a> 
 
         </li> 
 
        </ul> 
 
       </div> 
 
       <div class="col-md-4 column"> 
 
        <button class="btn btn-default" type="button">button</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <script> 
 
    \t \t 'use strict'; 
 
    \t \t console.log("here we go!"); 
 
    \t \t var tab = new Vue({ 
 
    \t \t \t el: '#mytable', 
 
    \t \t \t data: { 
 
    \t \t \t \t items: ['aa','bb'] \t \t \t \t 
 
    \t \t \t } 
 
    \t \t }); 
 
    \t </script> 
 
    </body> 
 
    </html>

并且外观如: appearance

回答

1

替换

v-for:"term in items" 

随着

v-for="term in items" 
相关问题