{"id":145,"date":"2023-01-17T11:28:00","date_gmt":"2023-01-17T11:28:00","guid":{"rendered":"https:\/\/mrzebra.co.uk\/code\/?p=145"},"modified":"2023-01-17T11:28:00","modified_gmt":"2023-01-17T11:28:00","slug":"how-to-make-a-compound-input-in-vue3","status":"publish","type":"post","link":"https:\/\/zebra-north.com\/code\/2023\/01\/17\/how-to-make-a-compound-input-in-vue3\/","title":{"rendered":"How to Make a Compound Input in Vue3"},"content":{"rendered":"\n

Form inputs often have separate fields that belong together, for example the “name” field may be decomposed into “first name” and “last name”. This guide shows you how to bundle multiple fields into a single component. The objective is to have the input’s value represented as an object:<\/p>\n\n\n\n

{\n    "firstName": "First name value",\n    "lastName": "Last name value",\n}<\/code><\/pre>\n\n\n\n\n\n\n\n
First, create a single page component called “Name.vue” containing two inputs:<\/p>\n\n\n\n
<template>\n  <div>\n    <input type="text" v-model="value.firstName" \/>\n    <input type="text" v-model="value.lastName" \/>\n  <\/div>\n<\/template>\n\n<script setup>\nconst props = defineProps({ modelValue: Object });\nconst value = props.modelValue;\n<\/script><\/code><\/pre>\n\n\n\n
The component is used as follows:<\/p>\n\n\n\n
<template>\n  <div>\n    <name v-model="name"><\/name>\n    <br \/>\n    {{ name }}\n  <\/div>\n<\/template>\n\n<script setup>\nimport { ref } from "vue";\nimport Name from "@\/Name.vue";\n\nconst name = ref({ firstName: "Test", lastName: "Person" });\n<\/script><\/code><\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Form inputs often have separate fields that belong together, for example the “name” field may be decomposed into “first name” and “last name”. This guide shows you how to bundle multiple fields into a single component. The objective is to have the input’s value represented as an object:<\/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-145","post","type-post","status-publish","format-standard","hentry","category-vue3"],"_links":{"self":[{"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/posts\/145","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=145"}],"version-history":[{"count":2,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/posts\/145\/revisions"}],"predecessor-version":[{"id":147,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/posts\/145\/revisions\/147"}],"wp:attachment":[{"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/media?parent=145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/categories?post=145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zebra-north.com\/code\/wp-json\/wp\/v2\/tags?post=145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}