Как передать название продукта и номер заказа

Question

У меня есть две таблицы, в одной создаются заказы , во второй , отображаются созданные заказы, таблица - Склад это создание заказа, для этого надо нажать на пятый блок в строке, там можно указать кол-во и цену за доставку, при создании в таблицу Заказы добавляется заказ в котором , номер заказа Nan , а название товара вообще отсутствует , как это исправить ?

const app = new Vue({
   el: '#app',
   data() {
      return {
         orders: [
            {id: 1, Nameorder: 'кола', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000}, 
            {id: 2, Nameorder: 'пепси', amount: 10000, Purchaseprice: 5000, Sellingprice: 3}, 
            {id: 3, Nameorder: 'поп', amount: 10000, Purchaseprice: 5000, Sellingprice: 312312},
            {id: 4, Nameorder: 'йцуйц', amount: 10000, Purchaseprice: 5000, Sellingprice: 346},
            {id: 5, Nameorder: 'фыв', amount: 10000, Purchaseprice: 5000, Sellingprice: 435734}, 
            {id: 6, Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 3415}, 
            {id: 7, Nameorder: 'фыв', amount: 10000, Purchaseprice: 5000, Sellingprice: 435645},
            {id: 8, Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000}, 
            {id: 9, Nameorder: 'ывф', amount: 10000, Purchaseprice: 5000, Sellingprice: 1646346}, 
            {id: 10, Nameorder: '124', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000},
            {id: 11, Nameorder: 'йц34', amount: 10000, Purchaseprice: 5000, Sellingprice: 345},
            {id: 12, Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 5}, 
            {id: 13, Nameorder: 'фыафыа', amount: 10000, Purchaseprice: 5000, Sellingprice: 1461346}, 
            {id: 14, Nameorder: 'фыа', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000}
         ],
         Sklad: 1,
         order: false,
         dataid: 0,
         delivers: [

         ],
      }
   },
   methods: {
      ClickOrderT(id) {
         this.order = true;
         if (this.order === true && this.changeprise === true) {
            this.changeprise = false
         }
         this.dataid = id - 1
      },
      MakeDelivers() {
         this.delivers.unshift({idDelivers: this.idDelivers++, Nameorder: this.Nameorder, Count: this.countTovar, PriceDeliver: this.Pricedel})
      },
   },
});

.scroll-table tbody td {
  background: rgba(255, 0, 0, 0.3);
}

.scroll-table tbody td:nth-child(1) {
  width: 27.77778vh;
  height: 3.7037vh;
}

.scroll-table tbody td:nth-child(2) {
  width: 10.18519vh;
  height: 3.7037vh;
}

.scroll-table tbody td:nth-child(3) {
  width: 18.42593vh;
  height: 3.7037vh;
}

.scroll-table tbody td:nth-child(4) {
  width: 19.16667vh;
  height: 3.7037vh;
}

.scroll-table tbody td:nth-child(5) {
  width: 5.37037vh;
  height: 3.7037vh;
  cursor: pointer;
}

.scroll-table tbody td:nth-child(6) {
  width: 5.37037vh;
  height: 3.7037vh;
  cursor: pointer;
}

.scroll-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.2);
}

.scroll-table-body::-webkit-scrollbar {
  width: 2.12963vh;
}

.scroll-table-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9.25926vh;
  cursor: pointer;
}

.scroll-table-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.65);
  border-radius: 9.25926vh;
  cursor: pointer;
}

.scroll-table-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.45);
}

.scroll-table thead th {
  background: rgba(255, 255, 255, 0.3);
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 1.85185vh;
  line-height: 2.22222vh;
  letter-spacing: -0.07em;
  color: #080808;
}

.scroll-table thead th:nth-child(1) {
  width: 27.77778vh;
  height: 4.44444vh;
}

.scroll-table thead th:nth-child(2) {
  width: 10.09259vh;
  height: 4.44444vh;
}

.scroll-table thead th:nth-child(3) {
  width: 18.33333vh;
  height: 4.44444vh;
}

.scroll-table thead th:nth-child(4) {
  width: 19.07407vh;
  height: 4.44444vh;
}

.scroll-table thead th:nth-child(5) {
  width: 15vh;
  height: 4.44444vh;
}

.scroll-table-two tbody td:nth-child(1) {
  width: 9.25926vh;
  height: 3.7037vh;
}

.scroll-table-two tbody td:nth-child(5) {
  width: 11.75926vh;
  height: 3.7037vh;
}
.scroll-table-two thead th {
  background: rgba(245, 1, 1, 0.3);
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 1.85185vh;
  line-height: 2.22222vh;
  letter-spacing: -0.07em;
  color: #FFFFFF;
}

.scroll-table-two thead th:nth-child(1) {
  width: 9.35185vh;
  height: 4.44444vh;
}

.scroll-table-two thead th:nth-child(2) {
  width: 22.22222vh;
  height: 4.44444vh;
}

.scroll-table-two thead th:nth-child(3) {
  width: 8.98148vh;
  height: 4.44444vh;
}

.scroll-table-two thead th:nth-child(4) {
  width: 6.2963vh;
  height: 4.44444vh;
}

.scroll-table-two thead th:nth-child(5) {
  width: 11.85185vh;
  height: 4.44444vh;
}

.scroll-table-two thead th:nth-child(6) {
  width: 8.7963vh;
  height: 4.44444vh;
}

.scroll-table-two thead th:nth-child(7) {
  width: 16.85185vh;
  height: 4.44444vh;
}

.scroll-table-two thead th:nth-child(8) {
  width: 5.37037vh;
  height: 4.44444vh;
}

.scroll-table-two tbody td {
  background: rgba(2, 217, 255, 0.5);
  color: #080808;
}

.scroll-table-two tbody td:nth-child(1) {
  width: 9.25926vh;
  height: 3.7037vh;
}

.scroll-table-two tbody td:nth-child(2) {
  width: 21.85185vh;
  height: 3.7037vh;
}

.scroll-table-two tbody td:nth-child(3) {
  width: 8.7963vh;
  height: 3.7037vh;
}

.scroll-table-two tbody td:nth-child(4) {
  width: 6.2963vh;
  height: 3.7037vh;
}

.scroll-table-two tbody td:nth-child(5) {
  width: 11.75926vh;
  height: 3.7037vh;
}

.scroll-table-two tbody td:nth-child(6) {
  width: 8.7963vh;
  height: 3.7037vh;
}

.scroll-table-two tbody td:nth-child(7) {
  width: 16.66667vh;
  height: 3.7037vh;
}

.scroll-table-two tbody td:nth-child(8) {
  width: 1.85185vh;
  height: 3.7037vh;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
      <div class="property__whitem">
         <div class="whitem__title">
            <div class="whitem__title-text" v-on:click.prevent="Sklad = 1">Склад</div>
            <div class="whitem__title-text" v-on:click.prevent="Sklad = 2">Заказы</div>
         </div>
         <div class="whitem__main" v-if="Sklad === 1">
            <div class="scroll-table">
               <table>
                  <thead>
                     <tr>
                        <th>Товар</th>
                        <th>Колво</th>
                        <th>Цена закупки</th>
                        <th>Цена продажи</th>
                        <th>Статус</th>
                     </tr>
                  </thead>
               </table> 
               <div class="scroll-table-body">
                  <table>
                     <tbody>
                        <tr v-for="order in orders" :key="order.id">
                           <td>{{order.Nameorder}}</td>
                           <td>{{order.amount}}</td>
                           <td>{{order.Purchaseprice}}</td>
                           <td>{{order.Sellingprice}}</td>
                           <td @click="ClickOrderT(order.id)"><img class="deliverorder" src="./img/deliverorder.svg"></td>
                        </tr>
                     </tbody>
                  </table>
               </div>   
            </div>
            <div class="whitem__order" v-if="order">
               <div class="whitem__order-title">
                  <div class="order-title__text">Заказ</div>
               </div>
               <div class="whitem__order-main">
                  <div class="order-main__text">Укажите кол-во и цену за доставку
                  </div>
                  <div class="order-main__list">
                     <input type="text" class="main__list-count" v-model="countTovar" oninput="this.value = this.value.replace(/[^0-9]/g, '')"> 
                     <input type="text" class="main__list-price" v-model="Pricedel" oninput="this.value = this.value.replace(/[^0-9]/g, '')"> 
                     <button class="main__list-btn" @click="MakeDelivers()">
                        Сделать заказ
                     </button>
                  </div>
               </div>
            </div>
         </div>
         <div class="whitem__main" v-if="Sklad === 2">
            <div class="scroll-table-two">
               <table>
                  <thead>
                     <tr>
                        <th>ID <br> заказа</th>
                        <th>Товар</th>
                        <th>Колво</th>
                        <th>Цена доставки</th>
                     </tr>
                  </thead>
               </table> 
               <div class="scroll-table-body-two">
                  <table>
                     <tbody>
                        <tr v-for="deliver in delivers">
                           <td>{{deliver.idDelivers}}</td>
                           <td>{{deliver.Nameorder}}</td>
                           <td>{{deliver.Count}}</td>
                           <td>{{deliver.PriceDeliver}}</td>
                        </tr>
                     </tbody>
                  </table>
               </div>   
            </div>
         </div>
      </div>                           
   </div>

Answer 1

Вы наверное не полный пример добавили, так как таких значение я не увидел: changeprise, idDelivers. И такие поля в data не указали countTovar, Pricedel.

Ошибка заключается в этой строке:

 this.delivers.unshift({idDelivers: this.idDelivers++, Nameorder: this.Nameorder, Count: this.countTovar, PriceDeliver: this.Pricedel})

Тут не известно значение Nameorder:undefined и idDelivers:NaN. Когда вы кликаете по 5 блоке, открывается небольшая форма, в ней вы вводите кол-во и цену, но не знаете с каким товаром работаете.

Как минимум предлагаю передавать туда id товара по которому кликнули, потом в этот объект добавить поля новая цена и кол-во и потом уже выводить в окне "заказы"

Небольшой пример:

const app = new Vue({
  el: '#app',
  data() {
    return {
      orders: [{
          id: 1,
          Nameorder: 'кола',
          amount: 10000,
          Purchaseprice: 5000,
          Sellingprice: 10000
        },
        {
          id: 2,
          Nameorder: 'пепси',
          amount: 10000,
          Purchaseprice: 5000,
          Sellingprice: 3
        },
        {
          id: 3,
          Nameorder: 'поп',
          amount: 10000,
          Purchaseprice: 5000,
          Sellingprice: 312312
        },
        {
          id: 4,
          Nameorder: 'йцуйц',
          amount: 10000,
          Purchaseprice: 5000,
          Sellingprice: 346
        },
        {
          id: 5,
          Nameorder: 'фыв',
          amount: 10000,
          Purchaseprice: 5000,
          Sellingprice: 435734
        },
        {
          id: 6,
          Nameorder: 'куук',
          amount: 10000,
          Purchaseprice: 5000,
          Sellingprice: 3415
        },
        {
          id: 7,
          Nameorder: 'фыв',
          amount: 10000,
          Purchaseprice: 5000,
          Sellingprice: 435645
        },
        {
          id: 8,
          Nameorder: 'куук',
          amount: 10000,
          Purchaseprice: 5000,
          Sellingprice: 10000
        },
        {
          id: 9,
          Nameorder: 'ывф',
          amount: 10000,
          Purchaseprice: 5000,
          Sellingprice: 1646346
        },
        {
          id: 10,
          Nameorder: '124',
          amount: 10000,
          Purchaseprice: 5000,
          Sellingprice: 10000
        },
        {
          id: 11,
          Nameorder: 'йц34',
          amount: 10000,
          Purchaseprice: 5000,
          Sellingprice: 345
        },
        {
          id: 12,
          Nameorder: 'куук',
          amount: 10000,
          Purchaseprice: 5000,
          Sellingprice: 5
        },
        {
          id: 13,
          Nameorder: 'фыафыа',
          amount: 10000,
          Purchaseprice: 5000,
          Sellingprice: 1461346
        },
        {
          id: 14,
          Nameorder: 'фыа',
          amount: 10000,
          Purchaseprice: 5000,
          Sellingprice: 10000
        }
      ],
      Sklad: 1,
      order: false,
      dataid: 0,
      countTovar: '',
      Pricedel: '',
      delivers: [

      ],
    }
  },
  methods: {
    ClickOrderT(id) {
      this.order = true;
      this.dataid = id
    },
    MakeDelivers(id) {
      let item = this.orders.find(i => i.id == id)
      item.Count = this.countTovar
      item.PriceDeliver = this.Pricedel
      this.delivers.unshift(item)
      this.order = false;
      this.countTovar = '',
        this.Pricedel = ''
    }
  },
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Roboto;
}

.scroll-table tbody td {
  background: rgba(255, 0, 0, 0.3);
}

.scroll-table tbody td:nth-child(1) {
  width: 27.77778vh;
  height: 3.7037vh;
}

.scroll-table tbody td:nth-child(2) {
  width: 10.18519vh;
  height: 3.7037vh;
}

.scroll-table tbody td:nth-child(3) {
  width: 18.42593vh;
  height: 3.7037vh;
}

.scroll-table tbody td:nth-child(4) {
  width: 19.16667vh;
  height: 3.7037vh;
}

.scroll-table tbody td:nth-child(5) {
  width: 5.37037vh;
  height: 3.7037vh;
  cursor: pointer;
}

.scroll-table tbody td:nth-child(6) {
  width: 5.37037vh;
  height: 3.7037vh;
  cursor: pointer;
}

.scroll-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.2);
}

.scroll-table-body::-webkit-scrollbar {
  width: 2.12963vh;
}

.scroll-table-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9.25926vh;
  cursor: pointer;
}

.scroll-table-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.65);
  border-radius: 9.25926vh;
  cursor: pointer;
}

.scroll-table-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.45);
}

.scroll-table thead th {
  background: rgba(255, 255, 255, 0.3);
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 1.85185vh;
  line-height: 2.22222vh;
  letter-spacing: -0.07em;
  color: #080808;
}

.scroll-table thead th:nth-child(1) {
  width: 27.77778vh;
  height: 4.44444vh;
}

.scroll-table thead th:nth-child(2) {
  width: 10.09259vh;
  height: 4.44444vh;
}

.scroll-table thead th:nth-child(3) {
  width: 18.33333vh;
  height: 4.44444vh;
}

.scroll-table thead th:nth-child(4) {
  width: 19.07407vh;
  height: 4.44444vh;
}

.scroll-table thead th:nth-child(5) {
  width: 15vh;
  height: 4.44444vh;
}

.scroll-table-two tbody td:nth-child(1) {
  width: 9.25926vh;
  height: 3.7037vh;
}

.scroll-table-two tbody td:nth-child(5) {
  width: 11.75926vh;
  height: 3.7037vh;
}

.scroll-table-two thead th {
  background: rgba(245, 1, 1, 0.3);
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 1.85185vh;
  line-height: 2.22222vh;
  letter-spacing: -0.07em;
  color: #FFFFFF;
}

.scroll-table-two thead th:nth-child(1) {
  width: 9.35185vh;
  height: 4.44444vh;
}

.scroll-table-two thead th:nth-child(2) {
  width: 22.22222vh;
  height: 4.44444vh;
}

.scroll-table-two thead th:nth-child(3) {
  width: 8.98148vh;
  height: 4.44444vh;
}

.scroll-table-two thead th:nth-child(4) {
  width: 6.2963vh;
  height: 4.44444vh;
}

.scroll-table-two thead th:nth-child(5) {
  width: 11.85185vh;
  height: 4.44444vh;
}

.scroll-table-two thead th:nth-child(6) {
  width: 8.7963vh;
  height: 4.44444vh;
}

.scroll-table-two thead th:nth-child(7) {
  width: 16.85185vh;
  height: 4.44444vh;
}

.scroll-table-two thead th:nth-child(8) {
  width: 5.37037vh;
  height: 4.44444vh;
}

.scroll-table-two tbody td {
  background: rgba(2, 217, 255, 0.5);
  color: #080808;
}

.scroll-table-two tbody td:nth-child(1) {
  width: 9.25926vh;
  height: 3.7037vh;
}

.scroll-table-two tbody td:nth-child(2) {
  width: 21.85185vh;
  height: 3.7037vh;
}

.scroll-table-two tbody td:nth-child(3) {
  width: 8.7963vh;
  height: 3.7037vh;
}

.scroll-table-two tbody td:nth-child(4) {
  width: 6.2963vh;
  height: 3.7037vh;
}

.scroll-table-two tbody td:nth-child(5) {
  width: 11.75926vh;
  height: 3.7037vh;
}

.scroll-table-two tbody td:nth-child(6) {
  width: 8.7963vh;
  height: 3.7037vh;
}

.scroll-table-two tbody td:nth-child(7) {
  width: 16.66667vh;
  height: 3.7037vh;
}

.scroll-table-two tbody td:nth-child(8) {
  width: 1.85185vh;
  height: 3.7037vh;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div class="" id="app">
  <div class="property__whitem">
    <div class="whitem__title">
      <div class="whitem__title-text" v-on:click.prevent="Sklad = 1">Склад</div>
      <div class="whitem__title-text" v-on:click.prevent="Sklad = 2">Заказы</div>
    </div>
    <div class="whitem__main" v-if="Sklad === 1">
      <div class="scroll-table">
        <table>
          <thead>
            <tr>
              <th>Товар</th>
              <th>Колво</th>
              <th>Цена закупки</th>
              <th>Цена продажи</th>
              <th>Статус</th>
            </tr>
          </thead>
        </table>
        <div class="scroll-table-body">
          <table>
            <tbody>
              <tr v-for="order in orders" :key="order.id">
                <td>{{order.Nameorder}}</td>
                <td>{{order.amount}}</td>
                <td>{{order.Purchaseprice}}</td>
                <td>{{order.Sellingprice}}</td>
                <td @click="ClickOrderT(order.id)"><img class="deliverorder" src="./img/deliverorder.svg"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="whitem__order" v-if="order">
        <div class="whitem__order-title">
          <div class="order-title__text">Заказ</div>
        </div>
        <div class="whitem__order-main">
          <div class="order-main__text">Укажите кол-во и цену за доставку
          </div>
          <div class="order-main__list">
            <input type="text" class="main__list-count" v-model="countTovar" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
            <input type="text" class="main__list-price" v-model="Pricedel" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
            <button class="main__list-btn" @click="MakeDelivers(dataid)">
                        Сделать заказ
                     </button>
          </div>
        </div>
      </div>
    </div>
    <div class="whitem__main" v-if="Sklad === 2">
      <div class="scroll-table-two">
        <table>
          <thead>
            <tr>
              <th>ID <br> заказа</th>
              <th>Товар</th>
              <th>Колво</th>
              <th>Цена доставки</th>
            </tr>
          </thead>
        </table>
        <div class="scroll-table-body-two">
          <table>
            <tbody>
              <tr v-for="deliver in delivers">
                <td>{{deliver.id}}</td>
                <td>{{deliver.Nameorder}}</td>
                <td>{{deliver.Count}}</td>
                <td>{{deliver.PriceDeliver}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как передать название продукта и номер заказа

Ответы (1 шт):