Laravel and Vue (in Forms)

Hi @zfdeveloper

No you do not have to do that. I mean yes Vue is active for whole application but your code will look something like that:

                 <form action="/new-job-preview" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="new-job-row">
                        <h2>{{ __('Photos') }}</h2>
                        <vue-dropzone 
                            id="drop1" 
                            :options="dropOptions" 
                            :duplicate-check="true"
                            @vdropzone-removed-file="deleteImage"
                        ></vue-dropzone>
                    </div>
                    <div class="btns-holder">
                        <a href="/new-job" class="btn"><i class="fas fa-angle-left"></i> {{ __('Previous Step') }}</a>
                        <button type="submit" class="btn">{{ __('Next Step') }} <i class="fas fa-angle-right"></i></button>
                    </div>
                </form>

I'm using vue-dropzone here as you can see.

I understand that it would work with dropzone, but what about vue-multiselect for instance that the selected option is stored in a variable and also most of the times as an object? How it would look like in a form?

Anyone to help me with this?

Hello, @zfdeveloper !

You don't need to create a new component to use vue-multiselect and you can use it directly inside your form in Blade. You will need to create a few methods in your Vue instance in the app.js file though. Those methods will be responsible for consuming the API and setting the options for the selection.

A general example would look like this:

inside you Vue instance ---

       data() {
            return {
                options: [],
            }
        },
        created() {
            this.getTags();
        },
        methods: {
            getTags() {
                axios.get('/api/admin/tags').then(response => {
                    this.options = response.data;
                })
            }
        },

And in your form ---

        <multiselect
            class=""
            v-model="tags"
            placeholder="Search a tag"
            label="name"
            track-by="name"
            :options="options"
            [...]>
        </multiselect>

That is just an example to give you an idea. Don't forget to properly import the libraries. There are plenty of examples on the internet, especially in Codepen, where people configure vue-multiselect directly in the Vue instance. But it is important to know that you Vue instance will get messy very, very quickly though.

Hope this helps. Let me know and good luck!

I asked the question cause often when you put an input such as a select in your form, the backend will receive the value based on the inputs name right? In the multiselect I need to display groups and also the values, whenever the user selects a value I want to send to the backend the value selected and also the group it was in, that is why I asked if I need to wrap everything in component and send the information from the component and not using blade itself.

Hope you are doing great.

I am not sure whether I understood your question or not. However, you can wrap only the multiselect component in other component. Then, you can easily emit only the filtered array you need. Also, you can massage your date in your controller to fit you need.