5. Revise books

• 5.1 define an identifier, mainly to control that the id of the current edited book cannot be modified in the editing state, that is, the input box of the current controlled book number is disabled in the editing state

• 5.2 binding to book number by attribute. If the attribute flag of disabled is true, it is disabled

• 5.3. The default value of flag is false. If you are in editing status, you need to change the flag to true, that is, the current form is disabled

• 5.4 reuse add method: when the user clicks submit, the logic in the handle will still be executed. If the flag is true, the form is in the non input state, and the executed user edits the data

<div id="app">
    <div class="grid">
      <div>
        <h1>Book management</h1>
        <div class="book">
          <div>
            <label for="id">
              Serial number:
            </label>
              <!-- 5.2 Binding by property disabled Attribute  flag by true That is to ban      -->
            <input type="text" id="id" v-model='id' :disabled="flag">
            <label for="name">
              Name:
            </label>
            <input type="text" id="name" v-model='name'>
            <button @click='handle'>Submission</button>
          </div>
        </div>
      </div>
      <table>
        <thead>
          <tr>
            <th>number</th>
            <th>Name</th>
            <th>time</th>
            <th>operation</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)'>modify</a>
              <span>|</span>
              <a href="" @click.prevent>delete</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>  
<script type="text/javascript">
        /*Book management - add books*/
        var vm = new Vue({
            el: '#app',
            data: {

// 5.1 define an identifier, mainly to control that the id of the current edited book cannot be modified in the editing state 
              // That is, the input box of the current control book number is disabled in the editing state 
              flag: false,
              id: '',
              name: '',
             
          },
          methods: {
              handle: function() {
                 /*
                   5.4  Reuse add method users still execute the logic in handle when clicking submit
                       If the flag is true, the form is in the non input state, and the executed user edits the data    
                 */
                  if (this.flag) {
                      // Editing books
                      // 5.5 update the corresponding data in the array according to the current ID  
                      this.books.some((item) => {
                          if (item.id == this.id) {
                              // This in the arrow function points to this in the parent scope 
                              item.name = this.name;
                              // After the update operation is completed, the loop needs to be terminated
                              return true;
                          }
                      });
                      // 5.6 after editing data, the form should be in the state that can be inputted
                      this.flag = false;
                  //  5.7 if the flag is false and the form is in the input state, the executed user adds data    
                  } else {
                      var book = {};
                      book.id = this.id;
                      book.name = this.name;
                      book.date = '';
                      this.books.push(book);
                      // Empty the form
                      this.id = '';
                      this.name = '';
                  }
                  // Empty the form
                  this.id = '';
                  this.name = '';
              },
              toEdit: function(id) {
                   /*
                   5.3  flag The default value is false. If you want to change the flag to true, the current form is disabled 
                   */
                  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>