Сохранение выбранных фильтров значений элементов в компоненте списка после возврата из просмотра компонента элемента - PullRequest
Новая
       66

Сохранение выбранных фильтров значений элементов в компоненте списка после возврата из просмотра компонента элемента

0 голосов
/ 08 апреля 2019

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

Я новичок в среде Vue и не уверен, что следую лучшим рекомендациям, но вот что я пытался сделать:

1 - Я пытался использовать шину событий, но достиг точкигде я могу получить объект, который содержит объект категории вопроса, к основному компоненту, а затем он будет использоваться в качестве атрибута внутри метода Onchange, который обычно запускается после события выбора категории.Я смог показать пользователю тот же список отфильтрованных элементов, однако проблема с этим подходом заключается в следующем: a- Я не могу обновить выбранные значения, чтобы показать выбранные параметры, которые дали список вопросов.Я попытался получить выбранный элемент, используя атрибуты ref, однако элемент select не определен, даже если я поместил его в стадию монтирования жизненного цикла.Он работает с безобразным хаком, используя метод setTimeout, и показывает элемент через одну секунду.b- Отфильтрованный список элементов имеет нумерацию страниц, и этот подход не показывает пользователю ту же страницу, с которой он выбрал элемент.c- Повторный вызов сервера

2- Я пытался сохранить глобальное значение в файле mixins, однако после сохранения значения в файле mixins и даже если значение объекта получено в файле mixins, но после обновлениясмешивает данные и затем вызывает их из списка вопросов, возвращает пустой объект.

3 - я пытался использовать keep-alive

код для подхода 1:

категорияобъект с готовностью загружен вопросом, используя событие emit.После того, как пользователь вернулся к просмотру вопроса, я передаю объект категории с событием, используя метод beforeDestroy: 

beforeDestroy () {
      EventBus.$emit('backToQuestions', this.question.category);
  }

Вот как выглядит объект категории: 

{…}=>
__ob__: Object { value: {…}, dep: {…}, vmCount: 0 }
created_at: 
id: 
parent_id: 
title: 
updated_at:

Этокак я заполняю отфильтрованный список вопросов 

created () {
    EventBus.$on('backToQuestions', category => {
          this.onChange(category)
      });
    this.fetch(`/categories`);
}

Мой выбор: 

<div class="col-md-4">
  <select ref="main" class="form-control" v-model="mainSelected"  @change="onChange(mainSelected)">
   <option  disabled value="">Questions Category (All)</option>
   <option v-for="option in parentCategories" :value="option">{{ option.title }}</option>
  </select>
</div>
<div  v-if="subCategory" class="btn-group">
  <select class="form-control"  v-model="subSelected"  @change="onChange(subSelected)">
   <option  disabled value="" selected >{{ categoryTitle }} Qs Categories</option>
   <option v-for="option in childCategories" :value="option">{{ option.title }}</option>
  </select>
</div>

Ниже приведен мой метод onChange только для справки: 

  onChange(option) {
        this.categoryOption = option;
        this.dataReady = false;
        this.subCategory = true;
        this.questions= {};
        this.questionsArray =[];
        this.categoryTitle = option.title;
        this.categoryId = option.id;
        if(option.children){
            this.childCategories = option.children;
        }
        axios.get(`/categories/${this.categoryId}`)//getting the category questions
        .then(({data}) =>  {
            this.questions = data;
            this.questionsArray.push(...data.data);
            this.nextUrl = data.next_page_url;
            this.dataReady = true;
            this.emptyCheck(this.questionsArray);
        })
        .catch((err) => {
           swal("Failed!", err.response.data.message, "info");
           this.$router.push('dashboard') ;
        })
      }

$ refs ofdiv выбора всегда возвращает undefined, если я не использовал setTimeout.

Код для подхода 2:

После включения файла mixins в оба компонента я поместил следующий код в mixins: 

  setCategory (questionCategory) {
       console.log("TCL: setCategory -> questionCategory", questionCategory)
        this.category = questionCategory;
       console.log("TCL: setCategory -> this.category", this.category)
        }
        ,
        getCategory () {

            return this.category ;
        }

Значение объекта, полученного методом set, является правильным, но после обновления метода данных mixins this.category возвращает только следующее: 

__ob__: Object { value: {…}, dep: {…}, vmCount: 0 }

т.е. без подробностей об объекте категории.Я попытался структурировать объект, а затем вызвать его, this.category показывает пустую переменную.

3 - с использованием keep-alive, однако это не работает, я пытался обернуть оба вида router-view и router-ссылка на сайт.

   <keep-alive include="questions-list">
       <router-link  to="/questions-list" class="nav-link">
           <i class="nav-icon fas fa-question-circle  orange"></i>
           <p>
               Questions
           </p>
       </router-link>
   </keep-alive>

Я даже пытался использовать имя компонента списка вопросов без результата.

Извините за длинный вопрос, но я застрял на некоторое время с этим, и этоядро моего приложения.

1 Ответ

0 голосов
/ 10 апреля 2019

Я сейчас использую метод поддержания активности. Глупая ошибка заключалась в том, что я назвал компонент только тогда, когда объявил свои маршруты. 

{ path: '/questions-list', name:"questions-list", component: require('./components/qa/Questions.vue')}

Для тех, кто сталкивается с той же проблемой, вы должны объявить имя компонента внутри объекта экспорта компонента следующим образом: 

export default {
    name: 'questions-list',

    data () {
        return {

        }
}
...