Question

我的页面包含一个包含三个字段的组件，代表用户选择：

状态（有效，已禁用）
位置（A楼，B楼）
姓名（测试用户）

这三个字段相互连接，所有字段都是列表，因此如果用户想要选择其他用户，例如：

首先选择活动状态（选择活动用户的所有位置）
然后选择A楼（选择在A楼工作的所有用户）
最终选择了测试用户。

在我的组件解决方案中，我创建了3个监视字段（selectedUserState，selectedLocation，selectedUserFullName），如果其中一个更改，则刷新其他字段列表：

var filter = Vue.component('UserFilter', {
template: '#userfilter-template',                        
data() {
    return {
        userFilter: {},
        selectedUserState: "",
        selectedLocation: "",
        selectedUserFullName: ""
    }
},
watch: {
    selectedUserState: function (newValue, oldValue) {
        var searchContext = {};

        searchContext.State = this.selectedUserState.Key;

        this.refreshFilter(searchContext);
    },
    selectedLocation: function (newValue, oldValue) {                
        var searchContext = {};

        searchContext.State = this.selectedUserState.Key;

        if (this.selectedLocation) {
            searchContext.LocationID = this.selectedLocation.Key;
        }

        this.refreshFilter(searchContext);               
    },
    selectedUserFullName: function (newValue, oldValue) {               
        var searchContext = {};

        searchContext.State = this.selectedUserState.Key;

        if (this.selectedLocation) {
            searchContext.LocationID = this.selectedLocation.Key;
        }

        if (this.selectedUserFullName) {
            searchContext.FullName = this.selectedUserFullName;
        }

        this.refreshFilter(searchContext);                
    }           
},
methods: {                     
    refreshFilter(searchContext) {
       postData(url, { searchContext: searchContext })
            .then(response => {
                if (response) {
                    this.userFilter = response.data.result;

                    if (this.selectedUserFullName !== this.userFilter.selectedUserFullName) {
                        this.selectedUserFullName = this.userFilter.selectedUserFullName;
                    }

                    if (this.selectedLocation !== this.userFilter.selectedLocation) {
                        this.selectedLocation = this.userFilter.selectedLocation;
                    }

                    if (this.selectedUserState !== this.userFilter.selectedUserState) {
                        this.selectedUserState = this.userFilter.selectedUserState;
                    }
                }
            });
    }           
},
mounted() {
    this.refreshFilter(null);
}});

问题是我只想在用户在UI中更改这些监视字段时触发这些监视字段，但是在设置新值时它会在刷新方法中触发，并触发不必要的刷新。

我试图找到一个unwatch方法来删除触发器并监视绑定触发器的方法，但没有任何成功。

提前感谢您的帮助。

Answer 1

一个简单的解决方案就是在你的用户界面上进行改变（我猜是下降吗？）

这将触发基本上完成手表功能当前功能的功能。

Vue观看字段仅从UI触发

1 个答案: