从查看项目组件返回后，保存列表组件中项目的选择过滤器值

Question

用户从查看项目（问题）组件返回后，我试图根据两个选择（类别和子类别）和从问题列表组件中的分页中选择页面来保留用户过滤的问题列表。

我是 Vue 环境的新手，不确定我是否遵循最佳实践，但我在这里尝试过：

1- 我尝试使用事件总线，但我达到了能够将包含问题类别对象的对象传递给主组件的地步，然后它将用作 Onchange 方法内部的属性通常在类别选择事件发生后触发。我能够向用户显示相同的过滤项目列表，但是，这种方法的问题在于： a-我无法更新选择值以显示给出问题列表的选定选项。 我尝试使用 ref 属性获取所选元素，但是即使我将其置于生命周期的 mounte 阶段，select 元素也是未定义的。它通过使用 setTimeout 方法与丑陋的 hack 一起工作，并在一秒钟后显示元素。 b- 过滤后的项目列表具有分页，这种方法不会向用户显示他们从中选择项目的同一页面。 c- 再次调用服务器

2- 我试图在 mixins 文件中存储一个全局值，但是在将值保存在 mixins 文件中之后，即使在 mixins 文件中接收到对象值，但是在更新了 mixins 数据然后从问题中调用它之后列表，它返回一个空对象。

3- 我尝试使用 keep-alive

方法一的代码：

类别对象使用事件发出来急切地加载问题。在用户查看问题返回后，我使用 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') ;
        })
      }

除非我使用 setTimeout，否则选择的 div 的 $refs 总是返回 undefined。

方法 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，但它不起作用，我尝试包装路由器视图和路由器链接。

   <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>

我什至尝试使用包含问题列表组件的名称，但没有结果。

很抱歉这个问题很长，但我已经被这个问题困住了一段时间，它是我应用程序的核心。

Answer 1

我现在正在使用保持活动的方法。愚蠢的错误是我只在声明路由时才命名组件。

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

对于那些面临同样问题的人，您应该在组件导出对象中声明组件的名称，如下所示：

export default {
    name: 'questions-list',

    data () {
        return {

        }
}