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

问题描述

问 题

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>

解决方案

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

这篇关于vue.js - 用Vue的v-for写一个表格，点击对应的行提示$index未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！