如果任何必填字段为空，如何中止vue.js方法post
如果任何必填字段为空，如何中止vue.js方法post
提问于 2018-07-28 00:27:25
点击按钮"Salvar“，我需要验证是否有任何必填字段为空，如果其中一个为空，我需要在vue.js方法post转到控制器中的操作之前中止它。
有没有人能帮我一下？
代码如下：
谢谢!
var vm = new Vue({
el: '#form',
data: {
endereco: "",
cidade: "",
estado: "",
cep: "",
},
methods: {
postResults: function () {
this.$http.post('/Controller/Action/', {
Endereco: this.endereco,
Cidade: this.cidade,
Estado: this.estado,
CEP: this.cep,
SEND: false
}).then((response) => {
console.log(response.data);
console.log(response.data.worked);
if (response.data.worked) {
console.log("DADOS ADICIONADOS!");
}
});
}
}
})<div class="form-group label-floating">
<label class="control-label" for="endereco">
Endereço
</label>
<input type="text" class="form-control" id="endereco" v-model="endereco" required>
<span class="material-input"></span>
</div>
<div class="form-group label-floating">
<label class="control-label" for="cidade">
Cidade
</label>
<input type="text" class="form-control" id="cidade" v-model="cidade" required>
<span class="material-input"></span>
</div>
<div class="form-group label-floating">
<label class="control-label" for="estado">
Estado
</label>
<input type="text" class="form-control" id="estado" v-model="estado" required>
<span class="material-input"></span>
</div>
<div class="form-group label-floating">
<label class="control-label" for="cep">
CEP
</label>
<input type="text" class="form-control" id="cep" v-model="cep" required>
<span class="material-input"></span>
</div>
<button class="btn btn-success" style="width: 80%;" v-on:click="postResults" type="submit">Salvar</button>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-28 01:49:33
实际上，您应该将其封装在一个表单中：
<form v-on:submit.prevent="postResults">然后从按钮中移除click处理程序。
接下来，创建一个新方法，我们将其命名为validatesFields。让它返回一个根据有效性解决或拒绝的承诺：
validatesFields: function() {
return new Promise(function(resolve, reject) {
if (this.field.valid && this.other_field.valid&&) {
return resolve()
} else {
return reject()
}
})
}最后，在您的postResults函数中遵守以下承诺：
postResults: function () {
this.validatesFields()
.then(function(){
this.$http.post('/Controller/Action/', {
Endereco: this.endereco,
Cidade: this.cidade,
Estado: this.estado,
CEP: this.cep,
SEND: false
}).then((response) => {
console.log(response.data);
console.log(response.data.worked);
if (response.data.worked) {
console.log("DADOS ADICIONADOS!");
}
});
}).error(function(){
// field validation failed, do something here
})
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51562024
复制相关文章
相似问题