前端笔记Vue项目 第2天 8

5  修改图书-下

• 5.1  定义一个标识符， 主要是控制 编辑状态下当前编辑书籍的id 不能被修改 即 处于编辑状态下 当前控制书籍编号的输入框禁用  

• 5.2  通过属性绑定给书籍编号的 绑定 disabled 的属性  flag 为 true 即为禁用

• 5.3  flag 默认值为false   处于编辑状态 要把 flag 改为true 即当前表单为禁用

• 5.4  复用添加方法   用户点击提交的时候依然执行 handle 中的逻辑如果 flag为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: {

// 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>