用Vue的v-for写一个表格，点击对应的行提示$index未定义

Question

1. 用Vue的v-for写一个表格，点击对应的行提示$index未定义

<script>

    var obj={
        grid: [
            {id: "ID", name: "名字", description: "描述", clickButton: "点击事件"},
            {id: "1", name: "a", description: "amorous", clickButton: "点击弹窗"},
            {id: "2", name: "b", description: "beautiful", clickButton: "点击弹窗"},
            {id: "3", name: "c", description: "clever", clickButton: "点击弹窗"},
            {id: "4", name: "d", description: "delicious", clickButton: "点击弹窗"},
        ]
    };
    var vm=new Vue({
        data:obj,
        template:'<table><tr v-for="row in grid">'
        +'<td>{{row.id}}</td>'
                +'<td>{{row.name}}{{$index}}</td>'
                +'<td>{{row.description}}</td>'
                +'<td><button @click="alert($index)">{{row.clickButton}}{{$index}}</button></td>'
        +'</tr></table>',
        methods:{
            alert:function (index) {
                alert("该行是第"+index+"行");
            }
        }
    })
    function load() {
        vm.$mount("#app");
    }
</script>

</body>

1. 

2. 

Answer 1

vue 2.0?
see http://vuejs.org/v2/guide/mig...

Answer 2

// 改下下这两处
v-for="(row,index) in grid"
@click="alert(index)"

var vm=new Vue({
        data:obj,
        template:'<table><tr v-for="(row,index) in grid">'
        +'<td>{{row.id}}</td>'
                +'<td>{{row.name}}</td>'
                +'<td>{{row.description}}</td>'
                +'<td><button @click="alert(index)">{{row.clickButton}}</button></td>'
        +'</tr></table>',
        methods:{
            alert:function (index) {
                alert("该行是第"+index+"行");
            }
        }
    })