具有CSS動畫和過渡效果的Vue.js Todo任務

Question

在下面的示例中，當您保存新任務時，如何添加視覺指示器，例如微調框和刻度線。

基本上，當我單擊“保存”按鈕時，將發生以下情況：

1. 保存按鈕應該不可見

2. “取消”圖標應變為不可見，而應顯示一個微調框以指示正在發生的事情

3. 如果成功保存，刻度圖標應短暫出現，然后在顯示刪除圖標之前消失。

當我嘗試復制睡眠效果以在觸發updateTask（）方法時顯示微調框時，我正在使用的v-show似乎不起作用？

<div class="container" id="el">

    <div class="row">
           <div class="col-md-10"><h1>Tasks</h1></div>
           <div class="col-md-2">
              <button id="" class="btn btn-primary pull-right" type="button" v-on:click="createTask()">
                  Add New
              </button>
           </div>
    </div>

    <div class="row" >
              <div class="col-sm-10 col-md-8">
                <table class="table table-striped">
                  <tr class="row" v-for="task in tasks">
                    <td class="col-sm-5">
                      <div class="form-group">
                        <label class="sr-only" for="name">
                          Name</label>
                          <input v-if="editKey == task.id" name="name" type="text" class="form-control"   v-model="task.name">

                          <span v-else v-on:click="editTask(task)">{{ task.name }}</span>
                         </div>
                    </td>
                    <td class="col-sm-5">
                      <div class="form-group">
                        <label class="sr-only" for="date">
                          Date</label>
                         <input v-if="editKey == task.id" name="date" type="text" class="form-control date-picker"  v-pikaday="task.date">
                         <span v-else v-on:click="editTask(task)">{{ task.date }}</span>

                      </div>
                    </td>
                    <td class="col-sm-2">
                      <ul class="list-inline">
                        <li v-if="editKey == task.id" >
                          <button class="btn btn-success btn-sm" type="button" v-on:click="updateTask(task)" v-show="!loading">
                             Save                               
                          </button>
                         </li>
                        <li v-if="editKey == task.id ">
                           <span v-show="!loading"><i class="fa fa-times text-danger" v-on:click="cancelEdit(task)" title="Cancel"></i></span>
                           <span v-show="loading"> <i class="fa fa-spinner"></i></span>
                        </li>
                        <li v-if="editKey !== task.id">
                           <i class="fa fa-trash-o text-muted" v-on:click="removeTask(task)" title="Delete"></i>
                        </li>
                        <li v-if="editKey !== task.id && task.id == -1">
                           <i class="fa fa-exclamation-triangle text-warning" title="Unsaved"></i>
                        </li>
                      </ul>

                   </td>
                  </tr>
               </table>
            </div>

            <pre>{{$data | json }}</pre>

    </div>

</div>

    <script>
          Vue.directive('pikaday', {
          twoWay: true,

          bind: function () {
            var self = this
            $(this.el)
               .pikaday({
                 format: 'D MMM YYYY',
                 defaultDate: moment().toDate()
               })
               .on('change', function () {
                    self.set(this.value)
                  })
          },
          update: function (value) {
            $(this.el).val(value).trigger('change')
          },
          unbind: function () {
            $(this.el).off().pikaday('destroy')
          }
        })

        var vm = new Vue({
          el: '#el',
          data: {
              editKey: '',
              loading: false,
              beforeEditCache: {
                id: '',
                name: '',
                date: ''
              },
              editedTask: null,
              tasks: [
                {id: 1, name: 'Task A', date: '25 Dec 2015'},
                {id: 2, name: 'Task B', date: '26 Dec 2015'}
              ]

          },
          methods: {
            createTask: function() {

                // if previously we were editing a task, lets cancel the edit
                if (this.editedTask){
                  this.cancelEdit();
                }

                // add new task with id -1 to indicate it hasn't been persisted
                this.tasks.push({
                    id: -1,
                    name: '',
                    date: ''
                });  

                // set edit key
                this.editKey = -1; 

            },
            storeTask: function(task) {

                // check if mandatory field completed
                if (!task.name || !task.date) {
                  return;
                }

                // persist the task by generating valid id
                task.id = Math.floor((Math.random() * 100) + 1);

            },

            editTask: function(task) {

                // if we were previously editing a task and clicked on another to edit without saving, let cancel the edit
                if (this.editedTask){
                  this.cancelEdit();
                }

                this.setBeforeEditCache(task);
                this.editedTask = task;
                this.editKey = task.id;
            },

            updateTask: function (task) {

              // if its a new task
              if (task.id == -1){
                this.storeTask(task);
              }
              // otherwise we are editing an existing task
              else {

                if (!this.editedTask.name || !this.editedTask.date) {
                  return;
                }

                this.loading = true;

                this.sleep(3000);

                this.editedTask = null;

                this.editKey = '';

                this.loading = false;

              }

            },

            cancelEdit: function (task = null) {

                if (task && task.id == -1) {
                  this.removeTask(task);
                }
                else {

                  this.editedTask.name = this.beforeEditCache.name;
                  this.editedTask.date = this.beforeEditCache.date;

                  this.editedTask = null;

                  this.editKey = '';
                }

            },

            removeTask: function(task) {
                  this.tasks.$remove(task);
            },

            setBeforeEditCache: function(task) {
                this.beforeEditCache.id = task.id;
                this.beforeEditCache.name = task.name;
                this.beforeEditCache.date = task.date;
            },

            sleep: function(milliseconds) {
              var start = new Date().getTime();
              for (var i = 0; i < 1e7; i++) {
                if ((new Date().getTime() - start) > milliseconds){
                  break;
                }
              }
            }
          }
        })

    </script>

這是小提琴https://jsfiddle.net/ozzii/6oe2k3py/

*更新*

因此，我設法進行了更新-請參閱新提琴，以提供所需的功能。 但這是一個非常混亂的解決方案-代碼無處不在。 有誰知道一種更好/更干凈的方法來重構和實現相同的功能，並且可能在保存元素時對刻度線產生淡入/淡出的影響？

Answer 1

這是關於睡眠效果的部分。 您可以使用setTimeout並使用bind函數來確保其中的this上下文是Vue組件。

this.loading = true;

setTimeout((function(){ 

    this.editedTask = null;

    this.editKey = '';

    this.loading = false; 

}).bind(this), 3000);