Gabotronix
2 months ago

Access vuex state dynamically with bracket notation in template

Posted 2 months ago by Gabotronix

Hi everybody, I have an v-for in my template and a piece of state which I want to dynamically access using bracket notation (this works for actions so it should work for state afaik) but nothing is getting rendered, this is my template:

<template v-if="field.element == 'select'">
    <select class="modal_input_select" v-model="formData[field.id]">
        <option v-for="result in $store.state[field.module][field.results]" :key="result.id" 
           :value="result.id">{{ result.title }}</option>
        </select>
</template> 

And this is my schema I use to build my modal:

createSchema:
    {
        title: 'Nueva publicación', description:'',
        formData: { image: '', title: '', body:'' },
        fields: 
        [
            { id: 'image', label: 'Imagen', element: 'image', type: 'image' },
            { id: 'title', label: 'Titulo', element: 'input', type: 'text' },
            { id: 'body', label: 'Contenido', element: 'editor', type: 'html' },
            { id: 'postcategory', label: 'Categoría', element: 'select', type: 'select', module: 'PostCategories', results: 'postCategories'},
        ],
        buttons:
        [
            { text: 'Guardar', background: 'var(--blue_boot)', validate: true, module: 'Posts', action: 'create' },
            { text: 'Volver', background: 'var(--grey_boot)', validate: false, module: 'AdminPanel', action: 'hideModal' },
        ],
        mounted:
        [
            { module: 'PostCategories', action: 'all' },
        ]
    },

Please sign in or create an account to participate in this conversation.