Question

我使用laravel和vue js创建了一个小的验证，但是当我尝试使用vue显示错误时，它不会显示在div中。当我使用开发工具检查时，消息在那里，但没有显示到指定的div。

样本刀片：

 <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")
                    }
                }); 
            }
        }
    })

Answer 1

我认为这是问题：

提交数据时，您正在覆盖"false"这样的属性：

v-if="errors"

这意味着您的错误现在为空而不是正确而且不是错误的。

并且因为你添加了v-if vue寻找错误是真还是假。

this.errors = null

您可以这样修理：

<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;
}

还有一件事，如果你仍然想检查它是如何工作然后使用v-show而不是v-if因为v-if remove元素和v-show只会隐藏你可以通过css改变行为{{1}并且会有你的结果。但如果要与v-if一起使用，则必须修改;

使用vue和blade不会显示错误响应

1 个答案: