Support the ongoing development of Laravel.io →
posted 3 years ago
Vue.js

I'm unable to render any data from my Vue component, to my form slot.

The component does get rendered, as does the template.

Vue devtools whows formfoo is defined as someName, but my label element doesnt show any text in the browser.

What am I doing wrong?

My blade (PHP) file:

<form-component id="createProduct" autocomplete="off" action="" method="POST">
    <template v-slot:form="{ formfoo }">
        <label v-text="formfoo"></label>
    </template>
</form-component>
<template>
	<form ref="form" :id="id" :action="action" :method="method" :autocomplete="autocomplete">
		<slot name="form" :formfoo="formfoo">
		</slot>
	</form>
</template>

<script>
export default {
	name: "FormComponent",

	delimiters: ['<%', '%>'],

	props: {
		id: {
			type: String,
			required: true,
		},

		action: {
			type: String,
			required: true,
		},

		method: {
			type: String,
			required: true,
		},

		autocomplete: {
			type: String,
			required: false,
			default: "on",
		},
	},

	data() {
		return {
			formfoo: 'someName'
		}
	},

}
</script>

<style scoped>

</style>
Last updated 3 years ago.
0

An advice from me, why can't you design all the form contents and labels in the FormComponent file, they fire actions from d the file you imported the FormComponent into i using the $emit method, the best way instead of using v-slot

0

Sign in to participate in this thread!

Eventy

Your banner here too?

Patrick patrickvltv Joined 13 Oct 2021

Moderators

We'd like to thank these amazing companies for supporting us

Your logo here?

Laravel.io

The Laravel portal for problem solving, knowledge sharing and community building.

© 2025 Laravel.io - All rights reserved.