Vue. js проблема с отправкой значений в массиве в конечную точку - PullRequest
Новая
       36

Vue. js проблема с отправкой значений в массиве в конечную точку

1 голос
/ 13 апреля 2020

Я только начал изучать Vue до конца sh моего проекта. Мой бэкэнд в Java Spring. Мой объект ожидания конечной точки со значениями: 

LocalDate date;
Long buyerId;
Long supplierId;
List<OrderDetailsDto> orderDetails;

мой объект в Vue выглядит следующим образом: 

order: {
          date: '',
          buyerId: 0,
          supplierId: 0,
          orderDetails: [
              {
                  quantity: 0
                  product: {
                      id: 0
                  }
              }
          ]
      }

и мои входные данные для количества и продуктов (только с этими значениями проблема ): 

           <div class="form-group">
                <label>Ilość (m3)</label>
                <input type="number" id="quantity" class="form-control" v-model="order.orderDetails.quantity"/>
            </div>

            <div class="form-group">
                <label>Wybierz product</label>
                <select v-model="order.orderDetails.product">
                <option
                    v-bind:value="{id: product.id, name: product.product}"
                    v-for="product in products"
                    v-bind:key="product.id"
                >{{ product.product }}</option>
                </select>
            </div>

с этими настройками мой объект запроса выглядит (то есть console.log непосредственно перед отправкой запроса): 

{__ob__: Observer}
  date: (...)
  buyerId: (...)
  supplierId: (...)
  orderDetails: Array(1)
    quantity: "22"
    product: Object
    0:
    quantity: 0
    product: Object

и здесь возникает проблема. Переменные, которые я объявил в Vue, имеют индекс [0] в orderDetails. Эти значения выше (количество: «22», product: Object) не отправляются, моя конечная точка думает, что массив пуст. Если я удаляю значения из массива в Vue объекте, то console.log выглядит нормально, но моя конечная точка не видит значения в массиве.

Кто-нибудь знает, как это решить?

1 Ответ

0 голосов
/ 13 апреля 2020

add data: {currquantity:0, currproduct: {id: null, name: null}}

           <div class="form-group">
                <label>Ilość (m3)</label>
                <input type="number" id="quantity" class="form-control" v-model="currproduct.quantity"/>
            </div>

            <div class="form-group">
                <label>Wybierz product</label>
                <select @change="order.orderDetails.push({quantity: currquantity, ...currproduct})" v-model="currproduct">
                <option
                    v-bind:value="{id: product.id, name: product.product}"
                    v-for="product in products"
                    v-bind:key="product.id"
                >{{ product.product }}</option>
                </select>
            </div>

Вы, вероятно, захотите создать что-то подобное ниже для обработки, показывающей, что было добавлено до сих пор и возможность удаления добавленных элементов: 

<ul>
<li v-for="(detail, i) in order.orderDetails">{{JSON.stringify(detail)}}
  <button @click="order.orderDetails.splice(i,1)">X</button>
</li>
</ul>
...