Get value from component’s slot input

Hi,

I am trying to use slots in a component to add optional filters in a component.

e.g. I have a form component which handles ajax requests. All form fields go inside the component and referenced with

But it looks like non of the data can be passed to the component from a slot, as apposed to a binding on the component element.

Component:

<template>
    <form class="form" :action="action" :method="method" v-on:submit.prevent="ajaxSubmit">
        <slot></slot>
    </form>
</template>

<script>
module.exports = {
    props: {
        action: {
            required: true,
            type: String
        },
        method: {
            default: 'post',
            required: false,
            type: String
        }
    },
    data() {
        return {
            formData: {}
        }
    },
    methods: {
        ajaxSubmit() {
            // Do ajax
        }
    },
}
</script>

Html:

<ajax-form action="#">

        <input type="text" name="name" v-model="formData.name">
        ...
        <button type="submit" class="btn btn-primary">Add Campaign</button>
</ajax-form>

Vue warn]: Property or method "formData" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)

Any suggestions? Thanks

logaretm

9 years ago

Level 9

The slots scope is limited to the parent scope, because it is compiled in the parent scope, as the docs say:

Everything in the parent template is compiled in parent scope; everything in the child template is compiled in child scope.

That means any properties inside your form component is not available to be used outside of that component, so you can't use formData.

There are multiple solutions, the easiest is that you can move the formData to be a property on your ajax-form and add the formData to the data of the parent instance.

Lunah

9 years ago

Level 3

@logaretm thanks for replying. Do you have a small use case? I don't fully understand the solution. Thanks

logaretm

9 years ago

Best Answer

Level 9

@Lunah Sure, here you go: https://jsfiddle.net/logaretm/aj60aztb/

Note that the formData now resides in the parent instance, so it is accessible from the parent scope. so we only need to pass it to the form as a prop.

1 like

Lunah

9 years ago

Level 3

Thanks for the example. I can see it's just a case of adding formData to the parent instance and passing it as a prop.

Very helpful.

Thank you :)

HighSolutions

7 years ago

Level 13

Hi,

What about a little bit advanced version? :

parent-component:

<template>
    <div>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    brand: '',
                    something: '',
                    something2: '',
                },
            }
        },
    }
</script>

child-component:

<template>
    <div>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    brand: '',
                    something: '',
                    something2: '',
                }
            }
        }
    }
</script>

HTML:

<parent-component>
    <form>
        <child-component>
            <input v-model="form.brand" type="text" name="brand" id="brand">
            <input v-model="form.something" type="text" name="something" id="something">
        </child-component>

        <child-component>
            <input v-model="form.something2" type="text" name="something2" id="something2">
        </child-component>
    </form>
</parent-component>

So inputs are passed in HTMl as a slots to the few child-component. It is passed as a slot to the parent-component where I would like to get all input data. Maybe architecture is not perfect but it was developed that way due to project needs.

Please or to participate in this conversation.