<template>
<div>
<input type="text" :value="firstname" @input="handleInputFirstName" />
<input type="text" :value="lastname" @input="handleInputLastName" />
<p>{{firstname + " " + lastname}}</p>
</div>
</template>
<script>
export default {
props: { firstname: String, lastname: String },
name: "BasicMultiInput",
setup(props, ctx) {
const handleInputFirstName = e => {
ctx.emit("update:firstname", e.target.value);
};
const handleInputLastName = e => {
ctx.emit("update:lastname", e.target.value);
};
return { handleInputLastName, handleInputFirstName };
}
};
</script>