Search code examples
javascriptvue.jscomputed-propertiesbuefy

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

I'd like to validate my input as easy as possible.

So the input should be checked if it's not null and a checkbox has to be checked to enable the submit button.

Currently, I was just able to bind the condition that the checkbox has to be checked but I don't know how to also bind the input.length != 0 condition.

Current code:

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

I read that computed properties could do the job, but I couldn't get it to work in my case.

thanks guys.

Solution

  • If you want to disable/hide button if no input is added or checkbox is not checked, the best solution would be to use a computed property. Also, you have added v-model="input" without adding a data property.

    Here is how this can be done.

    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>

    Note, this will not validate email input type, will just check if anything is added in email or not.