Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

sankarprakash's avatar

Can anyone let me know how to bind the value to form object?

I am using add more widget for my restaurant orders. So I am uisng inertia, vue to build the form, while submit create button I can capture first level of form object but nested child object I can not handle and I dont know how to do.

Here is my snippet?

          </td>
          <td class="border-t">
            <button v-if="(index == 0)" class="text-red-600 hover:underline" tabindex="-1" type="button" @click="add_more_items()">
              <icon name="plus" class="block w-6 h-6 fill-red-400"/>
            </button>
            <button v-else class="text-red-600 hover:underline" tabindex="-1" type="button" @click="remove_items(index)">
              <icon name="trash" class="block w-4 h-4 fill-red-400"/>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="flex items-center justify-end px-8 py-4 bg-gray-50 border-t border-gray-100">
    <loading-button :loading="form.processing" class="btn-indigo ml-auto" type="submit">Create Order</loading-button>
  </div>
</form>
0 likes
4 replies
sankarprakash's avatar

And here is the script:

import { Head, Link } from '@inertiajs/vue3' import Icon from '@/Shared/Icon.vue' import Layout from '@/Shared/Layout.vue' import TextInput from '@/Shared/TextInput.vue' import SelectInput from '@/Shared/SelectInput.vue' import LoadingButton from '@/Shared/LoadingButton.vue'

export default { components: { Head, Icon, Link, LoadingButton, SelectInput, TextInput, }, layout: Layout, props: { contacts: Array, orderItems: Array, }, remember: 'form', data() { return { form: this.$inertia.form({ contact_id: null, address: null, type: 'Dine In', status: 'New', menu_items: [{ menu_id:'', quantity:'', sale_price:'', },], }), } }, methods: { store() { this.form.post('/orders') }, add_more_items() { this.form.menu_items.push({'menu_id':'','quantity':'','sale_price':'',}); console.log(this.form.menu_items); }, remove_items(index) { // alert(index) console.log(this.form.menu_items) console.log(index) this.form.menu_items.splice(index, 1); console.log(this.form.menu_items) }, onMenuChange(event) { console.log(event.target.value) } }, }

sankarprakash's avatar

This is the form UI:

"https://i.postimg.cc/YCVD8kjD/addmore.png"

When I dump the value I am getting null for nested object

"https://i.postimg.cc/63VH9vcF/addmore-dump.png"

Please or to participate in this conversation.