Question

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

更新

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

Answer 1

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

这就是为什么你对isRefreshing的更改没有镜像到你的视图中。

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

在vuetify数据表行中禁用按钮

1 个答案: