[Vue.js] Table的Checkbox全選打勾範例(連同資料id一起提交)

by ShadowKao

HTML

<!DOCTYPE html>
<html lang="utf-8">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>全選勾範例</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style type="text/css">
        body {
            padding-top: 30px;
        }
    </style>
</head>
<body>
    <div class="container" id="myApp">
        <div class="row">

             
                <div class="form-group col-xs-12">
                    <table class="table table-bordered table-striped table-hover">
                        <thead>
                            <tr>
                                <th>
                                    全選
																		<input type="checkbox" v-model="chk_all" v-on:change="Chk_AllEvent" />
                                </th>
                                <th>
                                    假資料
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(user,index) in vueItems">
                         <td>
                             <input type="checkbox"  v-model="user.isChecked" />
                         </td>
                      <td>
                        {{user.name}}  {{user.sex}} {{user.job}}
                      </td>
                         </tr> 
                        </tbody>
                    </table>
                </div>
                
                <div class="form-group col-xs-12">
                    <input type="button" value="Ajax提交" class="btn btn-primary" v-on:click="AjaxSubmit"/>
                </div>
								<div class="form-group col-xs-12">
								 {{result}}
								</div>


             
        </div>
...