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>
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
Sign in to participate in this thread!
The Laravel portal for problem solving, knowledge sharing and community building.
The community