Question

我试图通过在Vue实例的数据部分中定义的数组进行迭代，因此可以自动确定表头。但是当我运行代码时，控制台输出如下：

console output

这里的代码（.js文件合并）：

＆＃13;

    <!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>
    		'use strict';
    		console.log("here we go!");
    		var tab = new Vue({
    			el: '#mytable',
    			data: {
    				items: ['aa','bb']				
    			}
    		});
    	</script>
    </body>
    </html>

＆＃13;

外观如下： appearance

Answer 1

替换

v-for:"term in items"

使用

v-for="term in items"

Vue.js 2.x v-for in not working（属性或方法未定义）

1 个答案: