How to export an array into my component data?


#1

Hi, I’m using vue-editor rich text editor for my admin panel, in order to customize the toolbar I have to include an array of options into my component data, however this big array crowds my component logic so I’d like to have the array declared into another file and import it into my component, how can I do this with vue?

This is my component:

<template>
<transition name="modal-fade">
<section class="modal_overlay_maincontainer" @click.self="hideModal()">
    <form class="modal_container">
        <i class="modal_close fa fa-times-circle" title="Cerrar" @click="hideModal()"></i>
        <h2 class="modal_title">Editar pregunta</h2>
        <div class="horizontal_centered_gradient_line"></div>
        <div class="modal_inputs_container">
            <div class="modal_input_column_container">
                <label class="modal_input_label">Pregunta:</label>
                <vue-editor class="modal_input_textarea" v-model="modalPayload.question" :editorToolbar="customToolbar"></vue-editor>
            </div>
            <div class="modal_input_column_container">
                <label class="modal_input_label">Respuesta:</label>
                <vue-editor class="modal_input_textarea" v-model="modalPayload.answer" :editorToolbar="customToolbar"></vue-editor>
            </div>
        </div>
        <div class="horizontal_centered_gradient_line"></div>
        <div class="modal_buttons_container">
            <button class="modal_button boot_blue" type="button" @click="onGetEditFaqData()">Guardar</button>
            <button class="modal_button boot_greyer" type="button" @click="hideModal()">Cancelar</button>
        </div>
    </form>
</section>
</transition>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapActions } from 'vuex';
import { VueEditor } from 'vue2-editor';
export default {

name: 'FaqsEditModal',
   
mounted() {
    console.log(this.$options.name + ' component succesfully mounted');
},

data() {
    return {
        customToolbar:  [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ 'header': 1 }, { 'header': 2 }],              
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            [{ 'script': 'sub'}, { 'script': 'super' }],
            [{ 'indent': '-1'}, { 'indent': '+1' }],
            [{ 'direction': 'rtl' }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'align': [] }],
            ['clean']
        ]
    }
},

computed:{
    ...mapState('Faqs', ['loadingStatus']),
    ...mapState('AdminModal', ['modalPayload'])
},

methods:{

    ...mapActions('Faqs', ['editFaq']),
    ...mapActions('AdminModal', ['hideModal']),

    onGetEditFaqData() {
                
        let faq = { id: this.modalPayload.id, question: this.modalPayload.question, answer: this.modalPayload.answer };
        this.editFaq(faq);
    }



}

}
</script>
<!--STYLES-->
<style scoped>
</style>

#2

You can add a config folder to your VueJS directory. Where you declare config files. In your case vue-editor.js or something like that. One that states clearly that the file is a config file for vue-editor.
Than in that file declare configurations like this.


export const ToolBarConfig = [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ 'header': 1 }, { 'header': 2 }],              
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            [{ 'script': 'sub'}, { 'script': 'super' }],
            [{ 'indent': '-1'}, { 'indent': '+1' }],
            [{ 'direction': 'rtl' }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'align': [] }],
            ['clean']
        ];

In your component than import these configs and use them, like this.

<script>
import { mapState, mapActions } from 'vuex';
import { VueEditor } from 'vue2-editor';
import { ToolBarConfig } from 'path/to/config/folder/vue-editor.js';

export default {

name: 'FaqsEditModal',
   
mounted() {
    console.log(this.$options.name + ' component succesfully mounted');
},

data() {
    return {
        customToolbar:  ToolBarConfig
    }
},

....

#3

wow that’s exactily what I was looking for! thanks my friend