Q:

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.

A:

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.

