[Vue.js] 操作物件群資料

by ShadowKao

HTML

<!doctype html>
<html>
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <title>Hello, Vue.js!</title>
    <style type="text/css">
        body {
            padding-top: 30px;
        }  
    </style>
</head>
<body> 
    <div class="container" id="myApp">
        <div class="row">
     
            
            <div class="form-group col-12">
                <button type="button" class="btn btn-warning" v-on:click="Editinit_users">把init_users的username Allen替換成ALLEN</button>
                <button type="button" class="btn btn-danger" v-on:click="Clearinit_users">清除init_users</button>
                <button type="button" class="btn btn-success" v-on:click="Restoreinit_users">恢復init_users</button>
            </div>
            <div class="form-group col-12">
                顯示init_users資料↓
                <ul v-if="Object.keys(init_users).length>0">
                    <li v-for="(user , key) in init_users">
                        userid:{{user.userid}}
                        <b> username:{{user.username}} </b>
                        email:{{user.email}} age:{{ user.age}}
                        sort:{{user.sort}}
                    </li>
                </ul>

            </div> <!--end .form-group-->
            <div class="form-group col-12">
                輸入字串並上移、下移資料↓
                <ul v-if="Object.keys(init_users).length >0" style="list-style:none;">
                    <li v-for="(user , key) in init_users" style="border:1px solid #000;"  >
                        userid:{{user.userid}}  username:{{user.username}}  age:{{ user.age}}
                        <br />
                        email: <input type="text"...