鍍金池/ 問(wèn)答/HTML/ Vue table指定位置添加數(shù)據(jù)

Vue table指定位置添加數(shù)據(jù)

<tr v-cloak v-for="(item, index) of list">

<td>{{index+1}}</td>
<td>{{item.username}}</td>
<td>{{item.email}}</td>
<td>{{item.sex}}</td>
<td>{{item.province}}</td>
<td>{{item.hobby.join(' | ')}}</td>

</tr>

list: [

{
    username: 'aaaaa',
    email: '123@qq.com',
    sex: '男',
    province: '北京市',
    hobby: ['籃球', '讀書', '編程']
},
{
    username: 'bbbbb',
    email: 'bbbbbbb@163.com',
    sex: '女',
    province: '河北省',
    hobby: ['彈琴', '讀書', '插畫']
}
// ...

]

如何在table的指定位置添加數(shù)據(jù)？
this.list.push({

username: 'ffff',
email: 'fffffff@163.com',
sex: '女',
province: '河南省',
hobby: ['彈琴', '插畫']

});這樣只能加在最后

回答
編輯回答
撥弦

請(qǐng)用splice

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        [v-cloak] {
            display: none;
        } 
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <table border="1">
            <tr v-for="item in list">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
        <button @click="insert">在第二個(gè)位置插入一行</button>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                list: [
                    { name:'user1', age:10 },
                    { name:'user2', age:20 },
                    { name:'user3', age:30 }
                ]
            },
            methods: {
                insert() {
                    this.list.splice(1,0, { name:'新插入的行', age: 100})
                }
            }
        })
    </script>
</body>

</html>
2017年8月7日 23:45