vuejs - 如何绑定两个条件以启用提交按钮？

Question

我想尽可能简单地验证我的输入。

因此，如果输入不为空，则应检查输入，并且必须选中复选框以启用提交按钮。

目前，我只能绑定必须选中复选框的条件，但我不知道如何绑定 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>

我读到计算属性可以完成这项工作，但我无法让它在我的情况下工作。

谢谢大家。

Answer 1

如果您希望在未添加输入或未选中复选框的情况下使用 disable/hide 按钮，最好的解决方案是使用计算属性。另外，您添加了 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 输入类型，只会检查电子邮件中是否添加了任何内容。

Answer 2

您可以添加一个具有专用功能的方法块来启用您的按钮，甚至更改按钮和按钮类 :

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

vuejs - 如何绑定两个条件以启用提交按钮？

vuejs - How to bind two conditions to enable submit button?

javascript

vue.js

computed-properties

buefy