Как закрыть модальное окно кнопкой «отправить», если поле заполнено?

Question

[Дима]

На кнопке «Отправить» висит обработчик события @click="$emit('close')" не совсем красиво, но меня устраивает ¯\_(ツ)_/¯ Не устраивает только то, что эта кнопка закрывает окно, даже если поле пустое, Как добавить условие, и если оно соблюдено, то сразу закрывать модальное окно по нажатию кнопки «Отправить»?

Демо

Answer 1

[0xD34F]

data: () => ({
  contact: '',
}),
methods: {
  onClick() {
    if (this.contact) {
      this.$emit('close');
    }
  },
},

<input v-model="contact">

<button @click="onClick">

Comments

[Дима]

Ошибку пишет( ReferenceError: contact is not defined


Все ли правильно я вписал?

Vue.component("modal", {
  template: "#modal-template"
});

new Vue({
  el: '#app',
  data: () => ({
    contact: '',
  }),
  methods: {
    onClick() {
      if (this.contact) {
        this.$emit('close');
      }
    },
  },
  data() {
    return {
      showModal: false
    }
  }
})

[0xD34F]

Дима, нет.

Кнопка, по клику на которую модальное окно должно закрыться, где находится? В модальном окне. Значит, и обработчик клика должен быть там же. И свойство, значение которого в обработчике проверяется.

[Дима]

Сложна как-то для меня :) Это получается скрипт в скрипт нужно записывать?) Ведь шаблон в теге script находится. Если так сделать (сомневаюсь что это правильно) то письма отправляются, но окно сразу появляется и не пропадает после отправки. если в script не оборачивать то та же ошибка.

<script id="modal-template" type="text/x-template">
 <script>
    data: () => ({
  contact: '',
}),
methods: {
  onClick() {
    if (this.contact) {
      this.$emit('close');
    }
  },
}
</script>
<transition name="modal">

[0xD34F]

Дима, это какое-то невероятное позорище. Я правильно понимаю, что для вас код - это никакой не код, а просто набор непонятных символов, вроде китайских иероглифов? Судя по показанному огрызку, так и есть.

https://jsfiddle.net/sLuywz92/

[Дима]

)) Я сразу вам и сказал что это бред, просто нужно было что-то показать. Спасибо

Answer 2

[Rsa97]

Очевидно. Повесить на это событие функцию, которая будет проверять условие и вызывать emit только при его выполнении.

Comments

[Дима]

Не силен в Vue, поэтому и спрашиваю тут. Через JS не получается повесить, так как форма недоступна в DOM, а появляется только по клику.

Answer 3

[Иван]

Для инпута ставите required, с кнопки сабмит переносите $emit в @onsubmit формы.

Comments

[Дима]

Вот так?

<form enctype="multipart/form-data" method="post" id="form" onsubmit="send(event, "send.php")" @onsubmit="$emit('close')">
 <input class="form-required" type="text" name="contact" id="contact" placeholder="Мессенджер или e-mail" required="required"/>
 <button class="modal__button button" type="submit">Отправить</button>
</form>

[Иван]

Дима, вроде того, только боюсь 2 разных onsubmit вам использовать не дадут, нужно в одном методе все как-то упаковать.
Т.е. @onsubmit="handleSubmit"
...
methods:{
handleSubmit(e){
//тут php как-нибудь, в нем не силен
$emit('close')
}
}

[Дима]

Иван, попробую на сервере, спасибо!