Блог

Я использую Vuejs с Inertiajs и Laravel.

Данные поступают из базы данных и затем передаются моему компоненту Vue в качестве реквизита через Inertiajs

В компоненте отображается массив (вместо массива items он будет перебирать actualitems массив, который имеет ту же структуру, что и массив items).

Пользователь может изменить количество товара, и новая цена обновляется.

Как я могу получить все данные при отправке формы с новыми изменениями?

Пример Codepen

HTML —

 <div class="container-fluid" id="app">
  <form @submit.prevent="submitForm">
    <ul id="list-example">
      <li v-for="item in items">
        <input type="text" v-model="item.name" readonly />
        <input type="number" v-model="item.price" readonly />
        <input type="number" v-model="item.quantity" min="1" />
        <input type="number" :value="item.quantity*item.price" readonly />
      </li>
    </ul>
    <input type="submit" value="Place order">
  </form>
</div>
 

Vue —

 new Vue({
  el: "#list-example",
  props: {
    actualitems: Array
  },
  data: {
    items: [
      { name: "Book", quantity: 5, price: 100, total: 500 },
      { name: "Pen", quantity: 2, price: 200, total: 400 },
      { name: "Marker", quantity: 7, price: 100, total: 700 }
    ]
  }
});
 

В вашем Codepen вы используете Vue 1.x, который устарел, используйте Vue 2.x или Vue 3.x .

Вы также монтируете свое приложение внутри формы. Я бы предложил установить его вне формы, тогда вы можете сделать @submit.prevent="submitForm" и определить метод, который обрабатывает отправку данных формы.

Вот один из примеров:

 new Vue({
  el: "#app",
  data: {
    items: [{
        name: "Book",
        quantity: 5,
        price: 100,
        total: 500
      },
      {
        name: "Pen",
        quantity: 2,
        price: 200,
        total: 400
      },
      {
        name: "Marker",
        quantity: 7,
        price: 100,
        total: 700
      }
    ]
  },
  methods: {
    submitForm() {
      console.log(this.items)
    },
    calculateTotal(index) {
      const item = this.items[index];
      
      item.total = item.quantity * item.price;
    }
  }
});

Vue.config.productionTip = false;
Vue.config.devtools = false; 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container-fluid" id="app">
  <form @submit.prevent="submitForm">
    <ul id="list-example">
      <li v-for="(item, index) in items">
        <input type="text" :value="item.name" readonly />
        <input type="number" v-model="item.price" readonly />
        <input @input="calculateTotal(index)" type="number" v-model="item.quantity" min="1" />
        <input type="number" :value="item.total" readonly />
      </li>
    </ul>
    <input type="submit" value="Place order">
  </form>
</div> 

Кроме того, как сказал @Dan, корень вашего приложения не может принимать реквизиты, поскольку над ним нет компонента для их передачи.