Vue – 如何在v-btn上设置属性,当点击时删除响应?

有多个 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>

我的想法是添加(在axios之后,移除) loading 属性到方法内部的按钮 webflowPublishRealestate 但我无法访问引用,因为它没有被创建。

你知道有其他方法可以做到吗?我不能用静态字符串引用按钮,因为这些组件有一个循环。

这是我的方法。

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;
            })
        },

解决方案:

你不需要使用 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.

然后更新你的axios调用的值。

realEstates[id].loading = true

给TA打赏
共{{data.count}}人
人已打赏
未分类

JavaScript - Try & Catch - 捕获Window.postMessage()错误的麻烦。

2022-9-9 6:58:17

未分类

将网站的url分割成多列到scala数据框架中。

2022-9-9 6:58:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索