Есть корзина на Vue. В ней показываются три блока в зависимости от условий:
сама корзина с содержимым(если товар добавлен и есть в localStorage),
пустая корзина(если товара соответственно нет) и
оповещение об отправленном товаре на оформление при нажатии на кнопку формы "отправить"
Последнее никак не получается вывести на экран. Может я неправильно создаю условие?
Это шаблон моей корзины
<template>
<div>
<div
class="cells"
v-if="PRODUCTS.length && !isSubmit">
<div class="cell cell-xl-8">
<cart/>
</div>
<cart-form/>
</div>
<div class="page-message" v-else-if="PRODUCTS.length===0 && !isSubmit">
<div class="page-message__icon">
<svg width="25" height="22" viewBox="0 0 25 22" fill="none" xmlns="http://www.w3.org/2000/svg">
...........</svg>
</div>
<div class="page-message__title">Ваша корзина пуста</div>
<div class="page-message__text">Выберите в каталоге интересующий товар и добавьте в корзину</div>
<div class="page-message__action">
<a class="button button-secondary" href="catalog.html">
<div class="button__body">Перейти в каталог</div>
<div class="button__icon">
<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 9L5 5L1 1" stroke="currentColor" stroke-width="2"></path>
</svg>
</div>
</a>
</div>
</div>
<div
v-if="isSubmit"
@showSuccessNotification="showSuccessNotification()"
@addAnOrder="addAnOrder()">
<div class="page-message">
<div class="page-message__icon">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
........</svg>
</div>
<div class="page-message__title">Ваш заказ успешно оформлен</div>
<div class="page-message__text">Ваша заявка успешно отправлена!<br>
В течение 5 минут мы Вам перезвоним
</div>
<div class="page-message__action">
<a class="button button-secondary" href="index.html">
<div class="button__body">Перейти на главную</div>
<div class="button__icon">
<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 9L5 5L1 1" stroke="currentColor" stroke-width="2"></path>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
</template>
<script>
import cart from './components/cart.vue'
import cartForm from './components/cart-form.vue'
import {mapActions, mapGetters} from 'vuex'
import axios from 'axios'
export default {
components: { cartForm, cart },
data() {
return {
isSubmit: false
}
},
name: "app",
computed: {
...mapGetters([
'PRODUCTS',
'DEACTIVATE_CART_STATUS',
'DELETE_ALL_PRODUCTS_FROM_CART',
'CHANGE_LOCALSTORAGE'
])
},
methods: {
...mapActions([
'SET_PRODUCTS_TO_STATE'
]),
showSuccessNotification() {
this.isSubmit = true
},
addAnOrder() {
axios.post('http://localhost:3000/products')
.then(response => console.log(response));
}
},
mounted() {
this.SET_PRODUCTS_TO_STATE();
}
}
</script>
Все методы я передаю от "ребенка" - самой формы
<template>
<div class="cell cell-md-8 cell-lg-6 mx-auto cart__form cell-xl-4">
<form
class="custom-form collapsing-form"
action="#"
@submit.prevent="onSubmit">
<div class="form__header">
<div class="form__title">Оформить заказ</div>
<div class="form__description">Заполните форму, и наш менеджер<br>свяжется с Вами в ближайшее время</div>
<div class="form__message">
<div class="form__success">
<div class="form__message__text">Ваша заявка успешно отправлена!</div>
</div>
</div>
</div>
<div class="form__bg">
<div class="form__body">
<label class="form__field form__field--required"><span class="form__label">Телефон</span>
<input
class="form__input"
type="tel"
required=""
inputmode="text"
v-model="tel">
</label>
<label class="form__field form__field--required"><span class="form__label">Email</span>
<input
class="form__input"
type="email"
required=""
v-model="email">
</label>
<label class="form__field"><span class="form__label">Текст сообщения</span>
<textarea
class="form__input"
rows="3"
v-model="text">
</textarea>
</label>
<div class="form__submit">
<button
class="button button-submit"
type="submit"
@click="showSuccessNotification">Отправить</button>
</div>
<div class="form__note">Нажимая на кнопку «Отправить», подтверждаю свое согласие с <a href="policy.html">условиями обработки персональных данных</a></div>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
name: 'cart-form',
data() {
return {
tel: '',
email: '',
text: ''
}
},
methods: {
showSuccessNotification() {
this.$emit('showSuccessNotification');
},
onSubmit() {
let newOrder= {
tel: this.tel,
emai: this.email,
text: this.text
}
this.$emit('addAnOrder', newOrder)
}
}
}
</script>
Мне кажется мой метод showSuccessNotification() не работает. Как в этом случае написать условие для отображения моего оповещения?
