vuejs - Как связать два условия, чтобы включить кнопку отправки?

Я хотел бы проверить свой вклад как можно проще.

Таким образом, вход должен быть проверен, если он не нулевой, и флажок должен быть установлен, чтобы активировать кнопку отправки.

В настоящее время я только смог связать условие, что флажок должен быть установлен, но я не знаю, как также связать условие 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>

Я читал, что вычисленные свойства могут сделать работу, но я не мог заставить это работать в моем случае.

Спасибо, парни.

Источник

2 ответа

Решение

Если вы хотите отключить / скрыть кнопку, если ввод не добавлен или флажок не установлен, лучшим решением будет использование вычисляемого свойства. Также вы добавили 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 тип ввода, просто проверим, добавлено ли что-либо в электронное письмо или нет.

Источник

Вы можете добавить блок методов со специальной функцией, чтобы включить кнопку и даже изменить классы кнопок и кнопок:

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

Источник
Другие вопросы по тегам