Buefy

by Md. Atiquzzaman Soikat

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/buefy"></script>
<link rel="stylesheet" href="https://unpkg.com/buefy/lib/buefy.css">
<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
<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>

CSS

#app {
  margin: 2em;
}
.v-cloak{
  display: none;
}

JavaScript

Vue.use(Buefy.default)
var App = new Vue({
    el: '#app',
    data(){
    	return {
        checked: false,
        isActive: false,
        email: null
      }
    },
    methods:{
    	log(){
      	console.log(arguments)
      }
    },
    computed: {
    	validDataAdded: function(){
       return this.checked && this.email && this.email.length > 0;
      }
    },
    watch: {
    	checked: function(){
      	console.log(this.checked);
      }
    }
})