Поля просмотра Vue запускаются только из интерфейса - PullRequest
Новая
       4

Поля просмотра Vue запускаются только из интерфейса

0 голосов
/ 14 мая 2018

Моя страница содержит компонент с тремя полями, который представляет выбор пользователя:

  • Состояние (активно, отключено)
  • Расположение (здание A, здание B)
  • Имя (тестовый пользователь)

Эти три поля связаны друг с другом, и все поля перечислены, поэтому, если пользователь хочет выбрать другого пользователя, например:

  • сначала выбор активного состояния (выбор всех местоположений активных пользователей)
  • затем выбор здания A (выбор всех пользователей, работающих в здании A)
  • наконец выбирает Test User.

В моем решении в компоненте я создал 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);
}});

Проблема заключается в том, что я хочу запускать эти поля наблюдения только в том случае, если пользователь изменяет их в пользовательском интерфейсе, но он вызывает метод обновления при установке нового значения и вызывает ненужные обновления.

Я попытался найти метод unwatch, который удаляет триггеры, и метод наблюдения, который связывает триггеры без какого-либо успеха.

Заранее спасибо за помощь.

1 Ответ

0 голосов
/ 15 мая 2018

Простым решением этой проблемы было бы внесение изменений даже в ваш пользовательский интерфейс (я полагаю, выпадающие списки?)

Какие функции будут запускать функции, которые в основном выполняют те же функции, что и ваши часы в настоящее время.

...