前端筆記Vue項目day2(八）

5 修改圖書-下
5.1 定義一個標識符， 主要是控制 編輯狀態下當前編輯書籍的id 不能被修改 即 處於編輯狀態下 當前控制書籍編號的輸入框禁用
5.2 通過屬性綁定給書籍編號的 綁定 disabled 的屬性 flag 爲 true 即爲禁用
5.3 flag 默認值爲false 處於編輯狀態 要把 flag 改爲true 即當前表單爲禁用
5.4 複用添加方法 用戶點擊提交的時候依然執行 handle 中的邏輯如果 flag爲true 即 表單處於不可輸入狀態 此時執行的用戶編輯數據數據
[mw_shl_code=applescript,true]<div id="app">
<div class="grid">
<div>
<h1>圖書管理</h1>
<div class="book">
<div>
<label for="id">
編號：
</label>
<!-- 5.2 通過屬性綁定 綁定 disabled 的屬性 flag 爲 true 即爲禁用 -->
<input type="text" id="id" v-model='id' :disabled="flag">
<label for="name">
名稱：
</label>
<input type="text" id="name" v-model='name'>
<button @click='handle'>提交</button>
</div>
</div>
</div>
<table>
<thead>
<tr>
<th>編號</th>
<th>名稱</th>
<th>時間</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key='item.id' v-for='item in books'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>
<a href="" @click.prevent='toEdit(item.id)'>修改</a>
<span>|</span>
<a href="" @click.prevent>刪除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
/圖書管理-添加圖書/
var vm = new Vue({
el: '#app',
data: {[/mw_shl_code]
[mw_shl_code=applescript,true] // 5.1 定義一個標識符， 主要是控制 編輯狀態下當前編輯書籍的id 不能被修改
// 即 處於編輯狀態下 當前控制書籍編號的輸入框禁用
flag: false,
id: '',
name: '',

        },
        methods: {
            handle: function() {
               /*
                 5.4  複用添加方法   用戶點擊提交的時候依然執行 handle 中的邏輯
                              如果 flag爲true 即 表單處於不可輸入狀態 此時執行的用戶編輯數據數據        
               */ 
                if (this.flag) {
                    // 編輯圖書
                    // 5.5  根據當前的ID去更新數組中對應的數據  
                    this.books.some((item) => {
                        if (item.id == this.id) {
                            // 箭頭函數中 this 指向父級作用域的this 
                            item.name = this.name;
                            // 完成更新操作之後，需要終止循環
                            return true;
                        }
                    });
                    // 5.6 編輯完數據後表單要處以可以輸入的狀態
                    this.flag = false;
                //  5.7  如果 flag爲false  表單處於輸入狀態 此時執行的用戶添加數據    
                } else { 
                    var book = {};
                    book.id = this.id;
                    book.name = this.name;
                    book.date = '';
                    this.books.push(book);
                    // 清空表單
                    this.id = '';
                    this.name = '';
                }
                // 清空表單
                this.id = '';
                this.name = '';
            },
            toEdit: function(id) {
                 /*
                 5.3  flag 默認值爲false   處於編輯狀態 要把 flag 改爲true 即當前表單爲禁                                          用 
                 */ 
                this.flag = true;
                console.log(id)
                var book = this.books.filter(function(item) {
                    return item.id == id;
                });
                console.log(book)
                this.id = book[0].id;
                this.name = book[0].name;
            }
        }
    });
</script>[/mw_shl_code]