Как передать список товаров добавленных в корзину при отправке email?

Question

[sickgang]

Здравствуйте!
Не могу разобраться
При отправке формы, нужно отправить значения инпутов, город, телефон, имя человека который делает заказ на сайте, с этим я разобрался, привязал к инпутам v-model, и передал значение в axios.post.
Но вопрос в другом, как передать список товаров которые были добавлены в корзину?
Вот код:

<template>
<div class="basket-wrapper">
  <div class="basket d-flex flex-column p-4">
    <div class="basket-close align-self-end">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="$emit('close')"><span aria-hidden="true">&times;</span></button>
    </div>
    <div class="">
      <div class="basket-list">
        <div class="basket-list_head">
          <h3 class="font-weight-bold">Корзина</h3>
        </div>
        <div class="basket-list_items">
          <div class="basket-list_item-wrap row mb-2 align-items-lg-center">
            <div class="basket-list_item__img col-lg-3 col-3">
              <img src="/images/products/1pen2.jpg" alt="">
            </div>
            <div class="basket-list_item__descr col-lg-8 col-7">
              <div class="row align-items-center">
                <div class="col-12 col-lg-5">
                  <p>Ручка BIKSON автоматичекая шариковая, синие чернила, зеленый матовый корпус.</p>
                </div>
                <div class="basket-list_item__count col-lg-2 col-6">
                    <span>-</span>
                    <span>1</span>
                    <span>+</span>
                </div>
                <div class="basket-list_item__price col-lg-3 col">
                  <span>15.04 руб</span>
                </div>
              </div>
            </div>
              <div class="basket-list_item__del-btn col-md-1 col">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-3">
      <div class="basket-info mt-3">
        <div class="basket-info_head">
          <h3 class="font-weight-bold">Получатель</h3>
        </div>
        <div class="col-lg-12 p-0">
          <div class="form-group">
            <label class="font-weight-bold" for="">Имя Фамилия</label>
            <input type="text" name="" placeholder="Иванов Иван" v-model="name" class="form-control">
          </div>
        </div>
        <div class="row">
          <div class="form-group col-lg-6">
            <label class="font-weight-bold" for="">E-mail</label>
            <input type="email" name="" placeholder="[e-mail]" v-model="email" class="form-control">
          </div>
          <div class="form-group col-lg-6">
            <label class="font-weight-bold" for="">Телефон</label>
            <input type="tel" name="" placeholder="[phone]" v-model="phone" class="form-control">
          </div>
        </div>
        <div class="col-lg-12 p-0">
          <label class="font-weight-bold" for="">Город</label>
          <input type="text" name="" placeholder="Саратов" v-model="city" class="form-control">
        </div>
      </div>
    </div>
    <div class="row mt-5 justify-content-center">
      <div class="basket-btn">
        <a href="#" class="item-button p-2" @click="sendMail">Оформить заказ</a>
      </div>
    </div>
  </div>
</div>

</template>

export default {
  props: ['data'],
  data() {
    return {
      name: '',
      email: '',
      phone: '',
      city: '',
      descr: '',
      count: '',
      price: ''
    }
  },
  methods: {
    sendMail: function() {
      event.preventDefault()
      axios.post('/submit', {
        name: this.name,
        email: this.email,
        phone: this.phone,
        city: this.city,
        descr: this.descr,
        count: this.count,
        price: this.price
      })
      .then(function (response) {
        console.log('ok!')
      })
      .catch(function (error) {
        console.log('Error!')
      })
    }
  }
}

И еще вопрос, правильно ли я передаю данные с инпутов, или можно как то лаконичнее написать код?

Comments

[Dmitry Tyvaniuk]

А где у вас сам список товаров? Оттуда и передавайте.
Так же не совсем понятно зачем вам отправлять отдельно количество, обычно передают мапу Id -> count, может цену ещё, а на бэке уже дёргают с базы цену для каждого товара и считают общую стоимость заново, это безопаснее.
Про инпуты - я бы поля формы в объект завернул отдельный, при отправке диструкторизировал. Но и простыней тоже можно, ничего критичного :)

Answer 1

[Константин Тимошено]

Vuex вам в помощь!