錯誤反應將不會出現使用VUE和刀片

我已經創建使用laravel和VUE JS小的驗證，但是當我試圖使用顯示它VUE的錯誤，一個div內將不會出現。當我檢查使用開發工具，消息在那裏，但沒有顯示到指定的div。錯誤反應將不會出現使用VUE和刀片

樣品片：

<div class="alert alert-danger" v-if="errors"> 
    <ul> 
      <li v-for="error in errors">@{{ errors[0]}}</li> 
    </ul> 
</div>

示例腳本：

var vm = new Vue({ 
     el:'#app', 
     data: { 
      errors: false 
     }, 
     mounted: function() { 
      $('.fileinput').fileinput(); 
     }, 
     methods: { 
      submitForm: function() { 
       vm.errors = null; 
       var form = document.forms.namedItem("addProjectForm"); 
       var formdata = new FormData(form); 
       $.ajax({ 
        url: $('#addProjectForm').attr('action'), 
        data: formdata, 
        contentType: false, 
        processData: false, 
        method: 'post', 
        error: function(data) { 
         if (data.status === 422) { 
          vm.errors = data.responseJSON; 
         } 
        }, 
        success: function(data) { 
         swal("Success", "Project added successfully", "success") 
        } 
       }); 
      } 
     } 
    })

來源

2017-02-21 claudios

只需在代碼中添加一些日誌並進行調試即可。 –

@JonatasWalker嘿男人，我現在明白了。我只是將'@ {{errors [0]}}'改爲'@ {{error [0]}}'。 – claudios

我覺得這裏是問題：

要覆蓋這樣v-if="errors"屬性提交數據時：

this.errors = null

這意味着你的錯誤現在爲空不是真的，並且不是錯誤的權利。

的，因爲你並添加V-如果VUE查找錯誤是真還是假。

<div class="alert alert-danger" v-if="errors"> 
    <ul> 
      <li v-for="error in errors">@{{ errors[0]}}</li> 
    </ul> 
</div>

您可以修復這樣的：

data: { 
    errors: false, 
    error_messages: null, 
},

提交數據後，檢查錯誤做到這一點：

if (data.status === 422) { 
    vm.error_messages = data.responseJSON; 
}

然後：

<div class="alert alert-danger" v-if="errors"> 
    <ul> 
      <li v-for="error in error_messages">@{{ error[0]}}</li> 
    </ul> 
</div>

一件事，如果你仍然想檢查它是如何工作的使用v-show而不是v - 如果因爲v-if remove元素和v-show會隱藏，並且你可以通過css改變行爲到display:block並且會有你的結果。但是你必須修改，如果你想用v-if;

來源

2017-02-21 14:52:25

嘿，我只是想通了。我剛剛將'@ {{errors [0]}}'改爲'@ {{error [0]}}'。在我發佈的問題下面查看我的評論。但無論如何感謝這一點。 – claudios

錯誤反應將不會出現使用VUE和刀片

回答

相關問題