{"id":148,"date":"2023-01-17T16:04:25","date_gmt":"2023-01-17T16:04:25","guid":{"rendered":"https:\/\/mrzebra.co.uk\/code\/?p=148"},"modified":"2023-01-17T16:04:25","modified_gmt":"2023-01-17T16:04:25","slug":"how-to-make-arrays-of-inputs-in-vue3","status":"publish","type":"post","link":"https:\/\/zebra-north.com\/code\/2023\/01\/17\/how-to-make-arrays-of-inputs-in-vue3\/","title":{"rendered":"How to Make Arrays of Inputs in Vue3"},"content":{"rendered":"\n

In the previous guide I showed how to make a compound input<\/a> for a person’s first and last name. Suppose that we now want to show this input for a variable number of people, how should that be done?<\/p>\n\n\n\n\n\n\n\n

We will start with a root data object that will contain all the data for our form, updated dynamically as the form inputs are changed.<\/p>\n\n\n\n

const formData = {\n    people: [],\n};<\/code><\/pre>\n\n\n\n
The form will contain a list of “Person” inputs, and a button to add a new person.<\/p>\n\n\n\n
<template>\n  <div style="border: 1px solid black">\n    <person\n      v-for="(person, index) in props.value"\n      :key="index"\n      :value="person"\n    \/>\n    <button @click.prevent="addPerson">Add Person<\/button>\n  <\/div>\n<\/template>\n\n<script setup>\nimport Person from "@\/Person.vue";\n\nconst props = defineProps({ value: Array });\n\nconst addPerson = function () {\n  props.value.push({ firstName: "", lastName: "" });\n};\n<\/script><\/code><\/pre>\n\n\n\n
And the Person input simply contains the two text input fields:<\/p>\n\n\n\n
<template>\n  <div>\n    <input type="text" v-model="props.value.firstName" \/>\n    <input type="text" v-model="props.value.lastName" \/>\n  <\/div>\n<\/template>\n\n<script setup>\nconst props = defineProps({ value: Object });\n<\/script><\/code><\/pre>\n\n\n\n
Things to Note<\/h2>\n\n\n\n
It’s important to realise that the updating of data is handled by Vue3’s object reactivity API, and NOT by its event system.  This has two implications:<\/p>\n\n\n\n
    \n
  1. Form values are passed in the :value<\/code> attribute, not<\/strong> in v-model<\/code>.<\/li>\n\n\n\n
  2. Form values passed in :value<\/code> must be objects.  Simple types (strings, numbers) will not work.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    In the previous guide I showed how to make a compound input for a person’s first and last name. Suppose that we now want to show this input for a variable number of people, how should that be done?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-148","post","type-post","status-publish","format-standard","hentry","category-vue3"],"_links":{"self":[{"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/posts\/148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/comments?post=148"}],"version-history":[{"count":2,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/posts\/148\/revisions"}],"predecessor-version":[{"id":150,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/posts\/148\/revisions\/150"}],"wp:attachment":[{"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/media?parent=148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/categories?post=148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/tags?post=148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}