Im very new to Vue.js, Formkit and am a bit lost in how to proceed. I have one component which creates a uniqueID(unique enough for us) when mounted.
<template>
<div>
<span>
<p class="solid" :for="id"> ID: {{ id }}</p>
</span>
</div>
</template>
<script>
export default {
name: "unique-id",
data() {
return {
id: null
}
},
mounted() {
this.id =
(Date.now().toString(32) +
Math.random().toString(16)).replace(/\./g, '')
}
}
</script>
I then need to submit that id and a couple of other bits of data to another component.
<script>
import uniqueID from "./id.vue";
</script>
export default {
name: "BasicItem-page",
data ()
{
// eslint-disable-next-line no-unused-vars
return {
data:{ }
}
},
components:
{
uniqueID,
}
}
</script>
<template>
<html lang="en">
<FormKit
type="form"
id="BasicItem"
v-model="data"
@submit="submit"
>
<h3>Add Item</h3>
<span>
<uniqueID/>
</span>
<FormKit
type="floatingLabelTextInput"
name="title"
label="Title"
validation="required|text"
/>
<FormKit
type="floatingLabelTextInput"
name="location"
label="Location"
validation="required|text"
/>
<uniqueID/>
<FormKit
type="floatingLabelTextInput"
name="item_title"
label="Item Title"
validation="required|text"
/>
<FormKit
type="floatingLabelTextInput"
name="item_location"
label="Item Location"
validation="required|text"
/>
</template>
I'm using the 'id' component at other places within the above form which also complicates matters
How do I get the ID?
I cant seem to be able to get the ID. Ive tried to create a composable which didnt give any errors but no data.
import { ref } from 'vue'
export function NewuniqueID() {
const id = (Date.now().toString(32) +
Math.random().toString(16)).replace(/\./g, '')
return { id }
}