前端笔记Vue项目day2(七）

 

4 修改图书-上

• 点击修改按钮的时候 获取到要修改的书籍名单

  • 4.1  给修改按钮添加点击事件，  需要把当前的图书的id 传递过去 这样才知道需要修改的是哪一本书籍

• 把需要修改的书籍名单填充到表单里面

  • 4.2  根据传递过来的id 查出books 中 对应书籍的详细信息

  • 4.3 把获取到的信息填充到表单

  • [mw_shl_code=applescript,true]<div id="app">
        <div class="grid">
          <div>
            <h1>图书管理</h1>
            <div class="book">
              <div>
                <label for="id">
                  编号：
                </label>
                <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>
                  <!--- [/mw_shl_code]
  • [mw_shl_code=applescript,true]4.1  给修改按钮添加点击事件，  需要把当前的图书的id 传递过去 
                                    这样才知道需要修改的是哪一本书籍
                                      --->  
                  <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: {
            flag: false,
            id: '',
            name: '',
            books: [{
              id: 1,
              name: '三国演义',
              date: ''
            },{
              id: 2,
              name: '水浒传',
              date: ''
            },{
              id: 3,
              name: '红楼梦',
              date: ''
            },{
              id: 4,
              name: '西游记',
              date: ''
            }]
          },
          methods: {
            handle: function(){
              // 3.4 定义一个新的对象book 存储 获取到输入框中 书 的id和名字 
              var book = {};
              book.id = this.id;
              book.name = this.name;
              book.date = '';
             // 3.5 把book  通过数组的变异方法 push 放到    books 里面
              this.books.push(book);
              //3.6 清空输入框
              this.id = '';
              this.name = '';
            },
            toEdit: function(id){
              console.log(id)
              //4.2  根据传递过来的id 查出books 中 对应书籍的详细信息
              var book = this.books.filter(function(item){
                return item.id == id;
              });
              console.log(book)
              //4.3 把获取到的信息填充到表单
              // this.id   和  this.name 通过双向绑定 绑定到了表单中  一旦数据改变视图自动更新
              this.id = book[0].id;
              this.name = book[0].name;
            }
          }
        });
      </script>[/mw_shl_code]