我想尽可能简单地验证我的输入。
因此,如果输入不为空,则应检查输入,并且必须选中复选框以启用提交按钮。
目前,我只能绑定必须检查复选框的条件,但我不知道如何绑定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>
我读到计算属性可以完成这项工作,但我无法让它在我的情况下工作。
谢谢你们。答案 0 :(得分:0)
如果要在未添加任何输入或未选中复选框的情况下禁用/隐藏按钮,则最佳解决方案是使用计算属性。此外,您添加了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;
}
}
})
&#13;
#app {
margin: 2em;
}
.v-cloak{
display: none;
}
&#13;
<!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>
&#13;
注意,这不会验证email
输入类型,只会检查是否在电子邮件中添加了任何内容。
答案 1 :(得分:0)
您可以使用专用功能添加方法块,以便按钮甚至更改按钮和按钮类:
<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'
}
}
}
}