Tag: Vue

Crear componente vue de forma dinámica

Importar, extender e instanciar

Primero importaremos el componente y crearemos un «extend» del mismo en una variable fuera de la llamada inicial de vue. Esto vale para cualquier tipo de componente que se haya creado. Utilizaré como ejemplo uno que he creado personalizado.

import SelectComponent from './components/SelectComponent.vue'
var SelectComponentClass = Vue.extend(SelectComponent)

En la instanciación raíz de vue, añadiremos en el método correspondiente la instanciación del nuevo componente.

new Vue({
    el: '#configuracion',
    data: {
        options: [],
        selectedOption: null,
    },
    methods: {
        showSelect() {
            var instanceSelect = new SelectComponentClass({
                propsData: {
                    selectId: 'componente-select',
                    selectOptions: this.options,
                    selectedOptionParam: this.selectedOption
                }
            })
            instanceSelect.$mount()
        }
    }
})

Podemos observar que al hacer la llamada a la clase que extiende el componente le pasamos por parámetro un objeto con datos. Esto es porque nuestro componente espera esos mismos parámetros y los aplica en el mismo.

Aplicación en nuestro HTML

Crearemos un elemento nuestro HTML con el que Vue puede interactuar a través del parámetro «ref» y le asignaremos el valor de «select». Si quisieramos añadir un nombre de referencia compuesto, hay que utilizar camelCase para darle ese valor. Por ejemplo «selectComponent». Esto es porque luego en la llamada dentro de nuestro Vue, this.$refs no aceptaría por ejemplo un valor tipo this.$refs.select-component.

<div class="row mb-2">
    <div class="col-lg-12" class="form-group">
        <label class="form-control-label">Select</label>
        <div ref="select"></div>
    </div>
</div>

Añadiremos ahora una nueva línea en nuestro método «showSelect» que realizará la acción de añadir en nuestro HTML el componente. Además utilizaremos el método «mounted» de la instanciación raíz para añadirlo una vez se haya renderizado todos los elementos de nuestro HTML.

new Vue({
    el: '#configuracion',
    data: {
        options: [],
        selectedOption: null,
    },
    mounted() {
        this.showSelect()
    },
    methods: {
        showSelect() {
            var instanceSelect = new SelectComponentClass({
                propsData: {
                    selectId: 'componente-select',
                    selectOptions: this.options,
                    selectedOptionParam: this.selectedOption
                }
            })
            instanceSelect.$mount()
            this.$refs.select.appendChild(instanceSelect)
        }
    }
})

Verificar si el archivo existe Vue Js

¿En qué casos nos podría interesar verificar que un archivo existe o no en nuestro servidor u otro?

Este es un caso real:

Tenemos una plataforma multilenguaje y queremos crear de forma dinámica los archivos en varios lenguajes. Para ello hemos creado un sistema de gestión de archivos en el que se puede utilizar el mismo registro para llamar a los distintos archivos en los distingos lenguajes. Es decir, podemos tener un manual en ES y EN.

Ahora bien, en Vue Js tenemos una estructura en la que no necesitamos decirle manualmente qué archivo escoger, si no que queremos que lo haga dinámicamente al cambiar de idioma. Aquí es donde nos vendrá de lujo esta función.

<a :href=»‘/’+locale+’/media/archivo.pdf'» class=»pdf-link»>{[ translations.label_download ]}</a>

Este es nuestro link que va a variar en los distintos idiomas.

¿Pero qué tal si hemos subido el archivo sólo en un idioma? Podemos evaluar si existe o no con la siguiente función.

He añadido además un caso en el que la evaluación puede estar condicionada a una acción. A la hora de hacer un clic, toggle se accionará y verificará que, para empezar esa estructura de html exista con el .length y a partir de allí empezar a buscar de cada registro encontrado si existe el archivo en el servidor.