jQuery plugin not working inside a .vue component

I'm working in a vue component for my application in Laravel 5.3, I try to integrate the Laravel File Manager in a standalone button, but this not working, nothing happend when I clic on the button for choose an image, this component required a jQuery init setup, like the following line:

$('.lfm-img').filemanager('image');

I checked the component outside the .vue file and its working fine, only inside the .vue file is not working.

This is the vue component

<template>
    <div class="modal fade" 
            id="section-" 
            tabindex="-1" 
            role="dialog" 
            aria-labelledby="sectionLabel-">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" 
                            class="close" 
                            data-dismiss="modal" 
                            aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                    </button>

                    <h4 class="modal-title" id="sectionLabel-">
                        
                    </h4>
                </div>
                <div class="modal-body">
                    <!-- Field List -->
                    <div v-if="editing != true">
                        <ul class="list-group">
                            <li class="list-group-item" v-for="field in fields">
                                <div class="clearfix">
                                    <div class="pull-left">
                                        <span>
                                            
                                        </span>
                                    </div>
                                    <div class="pull-right">
                                        <button type="button" 
                                                class="btn btn-default" 
                                                data-toggle="tooltip" 
                                                title="Editar valor"
                                                @click="setField(field)">

                                            <i  class="fa fa-pencil-square fa-lg" 
                                                aria-hidden="true"></i>
                                        </button>
                                    </div>
                                </div>
                            </li>
                        </ul> 
                    </div>
                    <!-- / Field List -->
                    <!-- Save value form -->
                    <div v-else>
                        <form @submit.prevent="updateFieldValue()">
                            <!-- Fields types -->
                            <div v-if="field.fieldtype_id === 1">
                                <div class="form-group vertical-align">
                                    <label class="col-md-2 text-right">
                                        Texto
                                    </label>
                                    <div class="col-md-10">
                                        <input  type="text" 
                                                v-model="value" 
                                                placeholder="Ingrese el valor"
                                                class="form-control"
                                                required="required">
                                    </div>
                                </div>
                                <p><br></p>
                            </div>
                            <div v-if="field.fieldtype_id === 2">
                                <div class="form-group">
                                    <textarea   v-model="value" 
                                                placeholder="Ingrese texto"
                                                class="form-control"
                                                rows="5"
                                                required="required">
                                    </textarea>
                                </div>
                                <p><br></p>
                            </div>
                            <div v-if="field.fieldtype_id === 3">
                                <div class="form-group vertical-align">
                                    <label class="col-md-3 text-right">
                                        Seleccione una imagen
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-btn">
                                                <a  data-input="value" 
                                                    data-preview="holder" 
                                                    class="btn btn-primary lfm-img">
                                                    <i  class="fa fa-picture-o"
                                                        aria-hidden="true"></i> Seleccionar
                                                </a>
                                            </span>
                                            <input  id="value" 
                                                    v-model="value" 
                                                    class="form-control" 
                                                    type="text" 
                                                    name="value"
                                                    required="required">
                                        </div>
                                    </div>
                                </div>
                                <img id="holder" style="margin-top:15px;max-height:100px;">
                                <p><br></p>
                            </div>

                            <!-- Actions -->
                            <div class="clearfix">
                                <div class="pull-right">
                                    <button type="button" 
                                            class="btn btn-default" 
                                            data-dismiss="modal" 
                                            @click="finishEdit()">
                                            Cancelar
                                    </button>
                                    <button type="submit" 
                                            class="btn btn-primary">
                                            Guardar
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- / Save value form -->
                </div>
                <div class="modal-footer">
                    <button type="button" 
                            class="btn btn-default" 
                            @click="finishEdit()" 
                            data-dismiss="modal">
                            Cerrar
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['section'],

        data() 
        {
            return {
                fields: [],
                field: [],
                value: '',
                loading: true, // start the spin loader
                editing: false // show field list
            }
        },

        ready()
        {
            this.loading = false; // stop the spin loader
            this.getSectionFields();
        },

        methods: 
        {   
            startEdit()
            {
                this.editing = true;
            },

            finishEdit()
            {
                this.field = [];
                this.value = '';
                this.editing = false;
            },

            setField(field) {
                this.field = field;
                if (this.field.pivot.value !== null) {
                    this.value = this.field.pivot.value;
                }
                this.startEdit();
            },

            getSectionFields()
            {   
                var self = this; // store "this." scope
                // GET request
                this.$http.get('/api/getSectionFields/' + this.section.id )
                    .then((response) => {
                    // sucess callback
                    var json = JSON.parse(response.body); // json parse
                    self.fields = json.fields;
                    this.loading = false; // stop the spin loader
                }, function(response) {
                    // error callback
                    console.log(response);
                });
            },

            updateFieldValue()
            {   
                this.loading = true // start the spin loader
                var params = {  section : this.section.id, 
                                field : this.field.id, 
                                value : this.value 
                            };
                // POST request
                this.$http.post('/api/update-value', params)
                    .then((response) => {
                    // sucess callback
                    this.getSectionFields();
                    this.finishEdit();
                }, function(response) {
                    // error callback
                    console.log(response);
                    this.getSectionFields();
                });
            }
        }
    }
</script>

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2oaHI0m
via IFTTT