vuejs -如何绑定两个条件才能启用提交按钮？
vuejs -如何绑定两个条件才能启用提交按钮？
提问于 2018-05-31 16:28:38
我想尽可能简单地验证我的输入。
因此，如果输入不为空，则应检查该输入，并且必须选中复选框才能启用提交按钮。
目前，我只能绑定复选框必须选中的条件，但我不知道如何绑定input.length != 0条件。
当前代码：
<template>
<b-field grouped>
<b-input
placeholder="E-Mailadresse"
type="email"
icon-pack="far"
icon="envelope"
expanded
v-model="input"
>
</b-input>
<button class="button" @click="isActive = !isActive" :class="[checked ? 'is-success' : 'is-white is-outlined']" :disabled="!checked">Subscribe</button>
</b-field>
<div class="field">
<b-checkbox v-model="checked">
<p>Wir nutzen für den Versand unserer Newsletter den Dienst <a href="link to newsletter company">Newsletter</a>. Wir benötigen deine E-Mailadresse, um dir Newsletter schicken zu können. Bitte bestätige das wir deine Daten erfassen dürfen. Weitere Informationen findest du in unserem <a href="link to privacy">Datenschutzhinweis</a>.</p>
</b-checkbox>
</div>
<b-message title="Danke!" type="is-success" has-icon :active.sync="isActive">
Deine Newsletteranmeldung ist erfolgt, bitte bestätige nun den Double-Opt-In-Link in der Besätigungsemail.
</b-message>
</template>
<script>
export default {
data () {
return {
checked: false,
isActive: false
}
}
}
</script>我读到计算属性可以做这项工作，但我不能让它在我的情况下工作。
谢谢你们。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-05-31 17:49:12
如果要在未添加输入或未选中复选框的情况下禁用/隐藏按钮，最好的解决方案是使用计算属性。此外，您还添加了v-model="input"，但没有添加数据属性。
这是如何做到这一点的。
Vue.use(Buefy.default)
var App = new Vue({
el: '#app',
data:function(){
return {
checked: false,
isActive: false,
email: null
}
},
methods:{
log(){
console.log(arguments)
}
},
computed: {
validDataAdded: function(){
return this.checked && this.email && this.email.length > 0;
}
}
})#app {
margin: 2em;
}
.v-cloak{
display: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Buefy</title>
<link rel="stylesheet" href="https://unpkg.com/buefy/lib/buefy.css">
</head>
<body>
<div id="app" v-cloak>
<b-field grouped>
<b-input
placeholder="E-Mailadresse"
type="email"
icon-pack="far"
icon="envelope"
expanded
v-model="email"
>
</b-input>
<button class="button" @click="isActive = !isActive" :class="[validDataAdded ? 'is-success' : 'is-white is-outlined']" :disabled="!validDataAdded">Subscribe</button>
</b-field>
<div class="field">
<b-checkbox v-model="checked">
<p>Wir nutzen für den Versand unserer Newsletter den Dienst <a href="link to newsletter company">Newsletter</a>. Wir benötigen deine E-Mailadresse, um dir Newsletter schicken zu können. Bitte bestätige das wir deine Daten erfassen dürfen. Weitere Informationen findest du in unserem <a href="link to privacy">Datenschutzhinweis</a>.</p>
</b-checkbox>
</div>
<b-message title="Danke!" type="is-success" has-icon :active.sync="isActive">
Deine Newsletteranmeldung ist erfolgt, bitte bestätige nun den Double-Opt-In-Link in der Besätigungsemail.
</b-message>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/buefy"></script>
</body>
</html>
注意，这不会验证email输入类型，只会检查是否在电子邮件中添加了任何内容。
Stack Overflow用户
发布于 2018-05-31 18:05:38
您可以添加一个具有专用函数方法块，使您能够使用按钮，甚至更改按钮和按钮类：
<template>
<b-input
placeholder="E-Mailadresse"
type="email"
v-model="mail"
v-bind:class="classMail"
@change="checkMail()"
>
</b-input>
<button class="button" :class="classSubmitMail"
@click="isActive = !isActive"
:disabled="mailOk">
Subscribe
</button>
...
</template>
<script>
export default {
data () {
return {
email: '',
checked: false,
isActive: false,
mailOk: false,
classMail: 'is-what-you-nead'
classSubmitMail: 'is-gray'
}
},
methods: {
checkMail: function () {
this.mailOk = false
// regexp stuff check mail .. .
// this.mailOk = ...
//this.classMail = 'is-...'
if (mailOk && this.checked) {
this.classSubmit = 'is-success'
this.classMail = 'is-success'
} else {
this.classSubmit = 'is-warning'
}
}
}
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50619896
复制相关文章
相似问题