Manager from modal, VUE error

[Stefanovicc]

What version of Laravel are you using? (nothing lower than v5.4).

5.5

is it an issue related to installation or usage ?

usage

what is the error you are getting ?

https://i.gyazo.com/e0a0564c9b5ef587017eb263ad97b48f.png

Do You Know A Solution For this Issue ?

I'm really new to Vue, but I don't know what I'm doing wrong. I'm trying to implement the modal function of the media manager: https://github.com/ctf0/Laravel-Media-Manager/wiki/Use-The-Manager-From-A-Modal

But keep getting this vue errors...

This is my js

window.Vue = require('vue')

require('../vendor/MediaManager/js/manager.js')
Vue.component('ExampleComp', require('./admin/vue/ExampleComp.vue'))

new Vue({
    el: '#mediamanager'
})

And my view:

<section id="mediamanager" v-cloak>
        <example-comp inline-template>
            <div>
                {{-- manager --}}
                <div v-if="inputName">@include('MediaManager::extras.modal')</div>

                {{-- items selector --}}
                <media-modal item="cover" :name="inputName"></media-modal>
                <media-modal item="gallery" :name="inputName" type="folder"></media-modal>
                <media-modal item="links" :name="inputName" :multi="true"></media-modal>

                {{-- for editor --}}
                @include('MediaManager::extras.editor')

                {{-- form --}}
                <form action="..." method="...">
                    {{-- cover --}}
                    <section>
                        <img :src="cover">
                        <input type="hidden" name="cover" :value="cover"/>
                        <button @click="toggleModalFor('cover')">select cover</button>
                    </section>

                    {{-- gallery --}}
                    <section>
                        <input type="text" name="gallery" :value="gallery"/>
                        <button @click="toggleModalFor('gallery')">select gallery folder</button>
                    </section>

                    {{-- links --}}
                    <section>
                        <input v-for="item in links"
                            :key="item"
                            :value="item"
                            type="text" 
                            name="links[]"/>

                        <button @click="toggleModalFor('links')">select gallery links</button>
                    </section>
                </form>
            </div
        </example-comp>
    </section>

    {{-- footer --}}
    @stack('styles')
    @stack('scripts')
    <script src="{{ asset("js/manager.js") }}"></script>

ExampleComp.vue looks exactly like the one in the WIKI (only another path to the modal mixin)

Can you help me out?

[ctf0]

the error is related for not correctly importing the mixin into your component, show me the ExampleComp.vue code

[Stefanovicc]

the error is related for not correctly importing the mixin into your component, show me the ExampleComp.vue code

import MediaModal from '../../../vendor/MediaManager/js/mixins/modal'

export default {
    name: 'example-comp',
    mixins: [MediaModal],

    // the inputs we want to use the manager for
    // in our case they are the article 'cover' & 'gallery'
    // for multi-selected files links "https://github.com/ctf0/Laravel-Media-Manager/issues/40#issuecomment-382416243"
    // 
    // for usage with an editor "wysiwyg" only, you dont need this part 
    data() {
        return {
            cover: '',
            gallery: '',
            links: ''
        }
    }
}

But not only the mixin is giving errors, also the cover, galley and links data.

Using "laravel-mix": "^4.1", btw

[ctf0]

ah yes, its related to wp 4

Vue.component('ExampleComp', require('./admin/vue/ExampleComp.vue').default)

[Stefanovicc]

My man, it works! My appreciation for this library, love it.

I got a few questions, don't know if it's appropriate to ask here but:

1. The modal right now does not close once you have chosen an image or folder, is it?
2. When an image is associated/related to a model, once in the media library that file is either deleted, renamed or moved. How would you suggest handling the associated model? You would want to update the model I guess, any tips how?

[ctf0]

• yes this is be design
• check the manager events, just b4 https://github.com/ctf0/Laravel-Media-Manager#config

also check https://github.com/ctf0/Laravel-Media-Manager/wiki/Have-More-Control-On-Uploads which gives u total control of how the manager behave

[Stefanovicc]

Ok thanks, i'll look into it!

[Stefanovicc]

One more question. I've managed to successfully implement the modal into my existing form, is it possible to place the modal inside another div element then the form fields? Currently all the buttons in the modal are submitting my form because they don't have the type="button" attribute. There are also some type="submit" attributes inside the modal, so actually I want to have the modal outside the existing form, but the form fields inside the existing form, any tips? Since they seem to be inside one inline vue template.

[ctf0]

np, use the modal-show & modal-hide to prevent your form from submitting https://github.com/ctf0/Laravel-Media-Manager/blob/master/README.md#events

https://github.com/ctf0/Laravel-Media-Manager/blob/dd4934bec746f9c503379f3a4b7ba3c9edc4d8e6/src/resources/assets/js/modules/events.js#L3-L5

[Stefanovicc]

Is it possible to get a relative path in the textfields from modal, instead of absolute path? It gives now: http://localhost:3000/storage/images/flyer.png but would love to get: images/flyer.png

[ctf0]

u can remove the site on save

[Stefanovicc]

Ah yes, that's how I do it now. Was just curious if there was an easier way. Thanks!

[Stefanovicc]

With the modal, it seems that once the modal opens, the "File selected" event is fired, even though I haven't clicked anything. This is especially in the WYSYWG editor a problem, because it puts multiple images in the editor.

Is there a workaround?

[ctf0]

this happens because the manager by default select first item after init, but yes i can disable it when modal is visible

[Stefanovicc]

Ah ok. If you could do this would be awesome!

[ctf0]

@Stefanovicc plz open a new ticket with the suggested behavior