Vue - как установить атрибут v-btn при нажатии и удалить при ответе? - PullRequest
Новая
       16

Vue - как установить атрибут v-btn при нажатии и удалить при ответе?

0 голосов
/ 24 апреля 2020

На странице имеется несколько Realestate компонентов. Внутри этого компонента есть кнопка publish, а внутри компонента есть функция VM.webflowPublishRealestate(id)

. Это btn: 

            <v-btn :ref="'webflow_publish_btn_'+realestate.id" @click="$emit('webflow-publish',realestate.id)" color="green">Publikovať aktuálnu verziu</v-btn>

, и именно так компонент используется : 

 <v-col :key="realestate.id" cols="12" v-for="realestate in getPublishedRealestates()" class="pa-3" md="6"
                       lg="4" sm="12">

                    <realestate_card :realestate="realestate"
                                     @duplicate-realestate-icon-clicked="duplicateRealestateIconClicked(realestate)"
                                     @delete-realestate-icon-clicked="deleteRealestateIconClicked(realestate)"
                                     @update-realestate-icon-clicked="updateRealestateIconClicked(realestate)"
                                     @patch-realestate="patchRealestate($event[0],$event[1],$event[2])"
                                     @webflow-publish="webflowPublishRealestate($event)"
                    ></realestate_card>


                </v-col>

Моя идея состояла в том, чтобы добавить (и после ax ios - удалить) loading атрибут к кнопке внутри метода webflowPublishRealestate, но я не могу получить доступ к ссылке, поскольку она не создано.

Вы знаете другой способ, как это сделать? Я не могу сослаться на кнопку со строкой stati c, так как есть все oop этих компонентов.

Это мой метод: 

webflowPublishRealestate(id) {
            var url = this.URLS.REALESTATE_WEBFLOW_PUBLISH.replace('0', id);
            var self = this;
            this.$refs['webflow_publish_btn_' + id].loading = true;
            axios.post(url).then(response => {
                alertRealestateWebflowPublished();
            }).catch(error => {

            }).finally(() => {
                self.$refs['webflow_publish_btn_' + id].loading = true;
            })
        },

1 Ответ

0 голосов
/ 24 апреля 2020

Для этого вам не нужно использовать refs.

Для этого вы можете использовать реактивные свойства.

Следует объявить переменную isLoading внутри ваших realEstates объектов и добавьте это к data, чтобы оно стало реактивным.

Затем вы можете использовать его непосредственно на кнопке

<v-btn :ref="'webflow_publish_btn_'+realestate.id" @click="$emit('webflow-publish',realestate.id)" color="green" :loading="realEstates[id].loading">Publikovať aktuálnu verziu</v-btn>

Обратите внимание на : перед loading .

А затем обновите значение из вашего звонка с топором ios.

realEstates[id].loading = true

...