在vuetify数据表行中禁用按钮

我是Vue.js和Vuetify新手所以请温柔;-)

我正在使用Vue.js和Vuetify的数据表，并且在每一行上我都有一个调用方法的按钮 . 我的问题是，如果我在该特定行上更改'isRefreshing'的值，则在每一行上使用'：disabled =“props.item.isRefreshing”'似乎并不尊重 .

所以这是我的数据表，'rows'是我的模型的集合，每个模型都有一个'isRefreshing'属性 . 如果我更改代码中任何特定行的值，那么应该禁用相应的行按钮，但是在'refreshExtract（）'方法中，无论我是否使用传入的'row'（即row.item参数）都没有效果）或者如果我实际上直接在'refreshExtract（）'方法中更改'rows'列表属性中的值 .

这是预期的行为，Vuetify中的错误还是我误解了如何使用Vue.js或Vuetify？我想我基本上是在每一行都要对'isRefreshing'进行'监视'以及更改相应行上按钮的禁用状态 .

无论哪种方式，什么是最好/最简单的方法来实现我追求的目标？

<v-data-table v-model="selectedRows"                      
                  v-bind:headers="headers"
                  v-bind:items="rows"
                  v-bind:loading="loading"
                  v-bind:pagination.sync="pagination"
                  v-bind:total-items="totalRows"                      
                  class="elevation-1">
        <template slot="items" slot-scope="row">
            <td>
                {{ row.item.name }}
            </td>
            <td>
                {{ formatDate(row.item.lastRefreshedAt) }}
            </td>
            <td>
                <v-btn v-if="row.item.isExtract" 
                       :disabled="row.item.isRefreshing"                                                      
                       color="primary"
                       @click="refreshExtract(row.item)">
                    Refresh Extract
                </v-btn>
            </td>
        </template>
    </v-data-table>

我当然可以通过将@click更改为'@ click =“row.item.isRefreshing = true; refreshExtract（row.item）”'来更改要禁用的按钮，但这看起来有点难看，而且我还需要以编程方式重新启动 - 刷新完成后启用按钮...

UPDATE

请注意我在这里使用TypeScript，因此根据评论'rows'属性： -

public rows: DataSource[]

是一组数据源模型，其中： -

export default class DataSource {
    public description: string;
    public id: number;
    public isExtract: boolean;
    public isRefreshing: boolean;
    public lastRefreshedAt: Date;
    public name: string;
    public projectId: number;
}

我的组件中的方法如下 . 请注意，我尝试使用启用/禁用方法直接更新rows属性，以查看它是否有效：

protected disableDataSourceRefresh(dataSource: DataSource): void {
        for (let i = 0; i < this.rows.length; i++) {
            if (this.rows[i].id == dataSource.id) {
                this.rows[i].isRefreshing = true;
            }
        }
    }

    protected enableDataSourceRefresh(dataSource: DataSource): void {
        for (let i = 0; i < this.rows.length; i++) {
            if (this.rows[i].id == dataSource.id) {
                this.rows[i].isRefreshing = false;
            }
        }
    }

    public refreshExtract(dataSource: DataSource): void {        
        if (dataSource.isExtract) {
            if (dataSource.isRefreshing) {
                alert('Data is currently refreshing');
            } else {
                this.disableDataSourceRefresh(dataSource);

                axios.post(*** removed ***)
                    .then(response => {
                        alert("done");

                        this.enableDataSourceRefresh(dataSource);
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        }
    }

最初的refreshExtract（）方法如下所示，但我没想到更新'dataSource'会过滤回传递给原来的项目，但无论如何都要试一试，因为这可能是一件很酷的事情 . Vue.js呢！ ;-)

public refreshExtract(dataSource: DataSource): void {        
            if (dataSource.isExtract) {
                if (dataSource.isRefreshing) {
                    alert('Data is currently refreshing');
                } else {
                    dataSource.isRefreshing = true;

                    axios.post(*** removed ***)
                        .then(response => {
                            alert("done");

                            dataSource.isRefreshing = false;
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }
            }
        }