错误反应将不会出现使用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和刀片

回答

相关问题