Vue JS自定義指令數據綁定

我創建了一個自定義指令，使表單通過ajax提交 - 但我似乎無法得到驗證錯誤綁定到Vue實例。Vue JS自定義指令數據綁定

我在這裏將我的指令：

<form action="{{ route('user.settings.update.security', [$user->uuid]) }}" method="POST" 
        enctype="multipart/form-data" v-ajax errors="formErrors.security" data="formData.security">

我的指令看起來像：

Vue.directive('ajax', { 
     twoWay: true, 
     params: ['errors', 'data'], 

     bind: function() { 
      this.el.addEventListener('submit', this.onSubmit.bind(this)); 
     }, 

     update: function (value) { 

     }, 

     onSubmit: function (e) { 
      e.preventDefault(); 

      this.vm 
        .$http[this.getRequestType()](this.el.action, vm[this.params.data]) 
        .then(this.onComplete.bind(this)) 
        .catch(this.onError.bind(this)); 
     }, 

     onComplete: function() { 
      swal({ 
       title: 'Success!', 
       text: this.params.success, 
       type: 'success', 
       confirmButtonText: 'Back' 
      }); 

     }, 

     onError: function (response) { 
      swal({ 
       title: 'Error!', 
       text: response.data.message, 
       type: 'error', 
       confirmButtonText: 'Back' 
      }); 

      this.set(this.vm, this.params.errors, response.data); 
     }, 

     getRequestType: function() { 
      var method = this.el.querySelector('input[name="_method"]'); 

      return (method ? method.value : this.el.method).toLowerCase(); 
     }, 
    });

我的VUE情況是這樣的：

var vm = new Vue({ 
     el: '#settings', 

     data: function() { 
      return { 
       active: 'profile', 
       updatedSettings: getSharedData('updated'), 
       formData: { 
        security: { 
         current_password: '' 
        } 
       }, 
       formErrors: { 
        security: [] 
       }, 
      } 
     }, 

     methods: { 
      setActive: function (name) { 
       this.active = name; 
      }, 

      isActive: function (name) { 
       if (this.active == name) { 
        return true; 
       } else { 
        return false; 
       } 
      }, 

      hasError: function (item, array, sub) { 
       if (this[array][sub][item]) { 
        return true; 
       } else { 
        return false; 
       } 
      }, 

      isInArray: function (value, array) { 
       return array.indexOf(value) > -1; 
      }, 

      showNotification: function() { 
       if (this.updatedSettings) { 
        $.iGrowl({ 
         title: 'Updated', 
         message: 'Your settings have been updated successfully.', 
         type: 'success', 
        }); 
       } 
      }, 
     } 
    });

然而，當我輸出數據，formErrors.security的值爲空

任何想法爲什麼？

來源

2016-04-27 G. Hanson

好像你錯過了道具前面的'：'：'

這似乎並沒有解決它，保存：/ –

你在哪裏添加任何東西到'formErrors'，據我所知，你永遠不會更新'formErrors' – Nora

問題在於this.set(/* ... */)行。 this.set與Vue.set或vm.$set不一樣。

this.set嘗試設置傳遞給指令的路徑：v-my-directive="a.b.c"。因此運行this.set('foo')將嘗試將$vm.a.b.c設置爲'foo'。

你想要做的是這樣的：

（ES6）

this.params.errors.splice(0, this.params.errors.length, ...response.data)

（香草JS）

this.params.errors.splice.apply(this.params.errors, [0,this.params.errors.length].concat(response.data))

將更新任何對象是聯繫在一起的errors PARAM上DOM節點。確保你做v-bind:errors="formErrors.security"或:errors="formErrors.security"。

來源

2016-05-05 04:45:59

Vue JS自定義指令數據綁定

回答

相關問題