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

Question

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

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

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

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

3- 我尝试使用 keep-alive

方法 1 的代码：

使用事件发出的问题预先加载类别对象。在用户查看问题返回后，我使用 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`);
}

我的select:

<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 的 select div 总是 return 未定义，除非我使用 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 之后 return 只有以下内容：

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

即没有类别对象的详细信息。我试图将对象字符串化然后调用它，this.category 显示一个空变量。

3- 使用 keep-alive，但它不起作用，我尝试同时包装 router-view 和 router-link。

   <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

我现在使用的是keep-alive方法。愚蠢的错误是我只在声明路由时命名了组件。

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

对于遇到同样问题的人，您应该像下面这样在组件导出对象中声明组件名称：

export default {
    name: 'questions-list',

    data () {
        return {

        }
}

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

Saving the select filters values of items in list component after going back from viewing an item component

vue.js

vuejs2

vue-component

vue-router

vue-events