Vue 'this' объект внутри шаблона на начальной загрузке V-таблицы - PullRequest
0 голосов
/ 08 марта 2019

Я добавил набор функций в

Vue.prototype.elantana = require("./shared/elantana.js").default;

в моем main.js;поскольку мне нужны только эти функции, мое приложение.

Доступ к этому набору функций - это очень просто.Я передаю объект this в качестве параметра для доступа к объекту vue

<div v-if="elantana.CheckPermission(this, 'fabrics@add_fabric')">
    <b-button class="float-button" variant="warning" @click="ShowEditModal">+</b-button>
</div>

Проблема возникает при запуске этой же функции в шаблоне компонента b-таблицы:

<b-table class="table-outline bg-white" :hover="true" :striped="false" :bordered="false" :small="false" :fixed="false" responsive="sm" :items="fabrics" :fields="tableFields" :current-page="currentPage" :per-page="perPage" head-variant="light">
    <template slot="actions" slot-scope="data">
        <div class="float-right">
            <div v-if="elantana.CheckPermission(this, 'fabrics@edit_fabric')">
                <b-button class="mr-2" type="button" size="sm" variant="danger" @click="ShowEditModal(data.item)"><i class="fa fa-trash-o"></i></b-button>
            </div>
        </div>
    </template>
</b-table>

[Vue warn]: Ошибка при рендеринге: «Ошибка типа: Не удалось прочитать свойство« $ store »со значением NULL»

Это прототип функции

/**
 * Returs if the permissions is in the avaialable permissions array
 * @param {VUE object} vm 
 * @param {String} permission 
 * @return {Boolean} 
 */
CheckPermission(vm, permission)

Я думалв обход проблемы с методом внутри компонента, действующим в качестве прокси для главной функции, или созданием реквизита в компоненте, который возвращает объект "this"

Любой способ использования объекта "this" внутри начальной загрузкиШаблон b-таблицы?

1 Ответ

0 голосов
/ 10 марта 2019

Это решение не является полностью действительным; поскольку вы можете получить доступ к объекту vie, вы не можете получить доступ к объекту «this» компонента. Для этого вам нужно установить объект VM в каждом подключенном хуке каждого компонента.

Полагаю, есть лучшее решение для этого. Есть идеи?

Просто исправил это, используя свойство внутри моего модуля:

VM: null,

SetVM(vm) {
    this.VM = vm;
},

Затем в любой другой функции я использую

this.VM

Тогда больше нет необходимости передавать объект vue в качестве параметра функции. следовательно, исправление проблемы в шаблоне b-таблицы в bootstrap-vue

...