在 vuetify 数据 table 行中禁用按钮

Question

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

我正在使用 Vue.js 和 Vuetify 的数据 table 并且在每一行上我都有一个按钮调用一个方法来执行某些操作。我的问题是，如果我在该特定行上更改 'isRefreshing' 的值，那么在每一行上使用 ':disabled="props.item.isRefreshing"' 似乎并不尊重。

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

这是预期的行为，Vuetify 中的错误还是我误解了如何使用 Vue.js 或 Vuetify？我想我基本上是在某种程度上让每一行的 'isRefreshing' 成为 'watched' 并更改相应行上按钮的禁用状态。

无论哪种方式，best/simplest 实现我所追求目标的方法是什么？

    <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)"”来更改要禁用的按钮，但这看起来有点难看，此外我需要以编程方式重新启用按钮刷新完成...

更新

请注意，我在这里使用的是 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;
}

我的组件中的方法如下。请注意，我尝试使用 enable/disable 方法直接更新行属性以查看它是否有效：-

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

Answer 1

如果您在 Vue 中使用对象数组，则默认情况下对象中的属性不响应。

这就是为什么您对 isRefreshing 的更改没有反映到您的视图中。

要防止这种行为，您必须使用 Vue.set(myArray, myIndex, newObject) 方法，一切都应该按预期工作。

在 vuetify 数据 table 行中禁用按钮

Disable button in vuetify data table row

vue.js

vuetify.js