On my app i have difficulties when i attempt to bind a hidden input element with value passed from prop (serviceID), The form should post comment to comments DB but it requires a serviceID that i'm passing as prop.
To complete this component i need to bind (or v-model) the serviceID value to the hidden input (link_id) and at the same time i need to be able to include the binded data to laravel comments.store function.
<form @submit.prevent="form.post(endpoint), {
preserveScroll: true,
onSuccess: () => form.reset(),
forceFormData: true,
_method: 'put',
}">
<input v-model="form.link_id" type="number" name="link_id">
<label for="comment" class="sr-only">About</label>
<textarea v-model="form.description" id="comment" name="comment" rows="5" required></textarea>
<Button :type="'submit'" :disabled="form.processing">Post</Button>
</form>
<script>
export default {
components: {
// ....
},
props:{
errors : Object,
endpoint : String,
serviceID : Number,
},
setup () {
const form = useForm({
link_id : null, // this should be like this.serviceID
description : null,
})
return { form }
},
methods:{
active(active){
if(active){
return 'z-10 bg-corn-50';
}
},
}
}
</script>
Not sure how to bind a prop value with a from input field in the form object in the setup function
any ideas ???