Question

我已经在这方面打了太长时间，并开始觉得我很难实现我想达到的目标。

所以在这里尝试一下。

我们想要实现什么 基本上，我们想要的是Vue代码库中的存储库服务，它允许我轻松地从服务器获取数据并更新要显示的数据列表。

该服务应在我们希望更新时自动更新其数据，以便我们可以轻松使用“服务”。由一个组件。

到目前为止我们有什么 我们创建了一个 Mixin ，我们可以将它们包含在我们的组件中。这个想法是mixin为我们提供方法，并承担更新数据的所有责任。网格组件通常也包含此mixin，因此可以独立于视图更新数据。

这是我们到目前为止存储库mixin的代码（仅发布对我的问题很重要的位...）

var qs = require('qs');
module.exports = {
    data: function() {
        return {
            repository: {
                config: {
                    resource: false,
                    filters: []
                },
                data: [],
                links: null,
                meta: {
                    total: 0
                },
                status: {
                    loading: true,
                    refreshing: true
                },
                filters: {
                },
                paging: {
                    current_page: 1
                },
            }
        }
    },
    methods: {
        repo: function() {
            var self = this;

            return {
                refresh: function() {
                    if (!self.repository.config.resource) {
                        self.$notify.error('Debug error: resource was not set on the repository');
                        return false;
                    } else {
                        self.repository.status.refreshing = true;
                        self.$http.get(self.repo_query_string).then(
                            (success) => {
                                self.repository.data = success.data.data;
                                self.repository.links = success.data.links;
                                self.repository.meta = success.data.meta;
                                self.repository.status.refreshing = false;
                                self.repository.status.loading = false;
                            },
                            (error) => {

                            }
                        )
                    }
                }

            }
        }

    },
    computed: {
        repo_query_string: function() {
            return '/api/' + this.repository.config.resource + '?' +
                qs.stringify({
                    filter: this.repository.filter,
                    page: this.repository.paging.current_page
                });
        }
    },
    watch: {
        repo_query_string: function() {
            this.repo().refresh();
        }
    },
    mounted: function() {
        this.repo().refresh();

    }
}

在我们的列表组件中（我们有多个视图，因此我们有多个组件需要访问此数据源），然后我们可以使用mixin，并按如下方式设置配置：

 module.exports = {
    mixins: [require('../../mixins/repository')],
    data: function() {
        return {
            repository: {
                config: {
                    resource: 'support/tickets/tickets',
                    filters: {
                        //TODO
                    }
                }
            }
        };
    },
    ....
}

所以，我的组件将在this.respository.data中提供存储库数据......工作得很好。现在，我们想要向存储库添加过滤器。

由于资源是由我的列表组件设置的，我的存储库没有任何线索，也不应该知道我们可以过滤哪些字段。

基本上，我们想要这样的东西：

在此示例中，我们希望用户基本上能够选择故障单状态的类型。当他没有选择任何东西时，应该没有过滤器激活，只要他选择一个或多个，我们希望应用过滤器。

为实现这一目标，我们需要执行以下操作，这就是我在寻找输入的地方：

更新过滤数据：

当我们点击任何过滤器时，我们需要在this.respository.filters.status_id数组中添加或删除过滤器的值。基本上，我们想看到这个：

this.repository.filters.status_id = []

意味着status_id没有活动过滤器（请注意，status_id是由组件选择的，而不是mixin，所以我们如何动态添加这样的值？

this.repository.filters.status_id = ['new', 'in_progress']

意味着用户只想查看新状态或正在进行状态的故障单。你明白了。

所以我的第一个问题是，如何轻松地向此对象添加/删除项目。 this.repository.filters的初始状态是一个空对象＆＃39;其中status_id尚未设置...

2 /注意过滤器的变化由于我还没有在this.repository.filters上设置status_id属性，因此我不认为VueJS会在添加更改时获取更改。最好的方法是什么？

3 /以及如何正确地将其发送到服务器？这是最后一部分，但我也在努力解决如何将更新的过滤器正确发送到服务器的问题。如果我只是做资源可能是最好的？过滤器= ENCODED_JSON_OBJECT_GOES_HERE所以我可以在服务器上解码它并相应地应用过滤器？

我知道我似乎在问网上的东西，或者说SO，但我仍然没有找到我正在寻找的东西，我希望有人可以指出我如何正确实现这一目标的好教程。

因为在这个时候，我有点担心我们制定的解决方案过于复杂而无法保持可维护性。它看起来像我应该能够做的事情＆＃34;出自VueJS框＆＃34;。

谢谢！大卫。

使用多个选择在VueJS中动态创建过滤器对象的最佳方法

0 个答案: