vuetify 数据表行中的禁用按钮

Question

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

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

这是我的数据表，“行”是我的模型的集合，每个模型都有一个“isRefreshing”属性。如果我更改代码中任何特定行的值，则应禁用相应的行按钮，但在“refreshExtract()”方法中，无论我使用传入的“行”（即 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)"' 来更改要禁用的按钮，但这看起来有点难看，而且我还需要刷新完成后以编程方式重新启用按钮...

更新

请注意，我在这里使用的是 TypeScript，因此根据 cmets 的“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);
                        });
                }
            }
        }

Answer 1

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

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

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