How to send a list of products added to the cart when sending an email?

Question

Vue.js

Hello!
I can't figure it out
When submitting the form, you need to send the input values, city, phone, name of the person who makes the order on the site, I figured it out, tied v-model to the inputs, and passed the value to axios.post.
But the question is different, how to pass a list of products that have been added to the cart?
Here is the code:

<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="[email protected]" 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!')
      })
    }
  }
}

And another question, am I passing the data from the inputs correctly, or can I write the code in a more concise way?

Answer 1

Vuex is here to help!