用户从查看项目(问题)组件返回后，我正在尝试根据问题列表组件中的分页中的两个选择(类别和子类别)和所选页面保留用户过滤的问题列表。
我是 Vue 环境的新手，不确定我是否遵循最佳实践，但这是我尝试做的：
1- 我尝试使用事件总线，但我达到了一个点，我能够将包含问题类别对象的对象获取到主组件，然后将其用作 Onchange 方法中的属性，通常在类别选择事件发生后触发。我能够向用户显示相同的过滤项目列表，但是，这种方法的问题在于： a-我无法更新选择值以显示提供问题列表的选定选项。 我尝试使用 ref 属性获取所选元素，但是即使我将其置于生命周期的挂载阶段，选择元素也是未定义的。它通过使用 setTimeout 方法与丑陋的黑客一起工作，并在一秒后显示元素。 b-筛选的项目列表具有分页功能，此方法不会向用户显示他们从中选择项目的同一页面。 c- 再次调用服务器
2-我尝试在mixins文件中存储一个全局值，但是在将值保存在mixins文件中后，即使对象值在mixins文件中收到，但是在更新mixins数据然后从问题列表中调用它之后，它返回一个空对象。
3-我尝试使用保持活动状态
方法 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`);
}
我的选择：
<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选择的div总是返回未定义，除非我使用了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，但是它不起作用，我尝试包装路由器视图和路由器链路。
<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>
我什至尝试使用包含问题列表组件的名称，但没有结果。
很抱歉这个长问题，但我已经为此卡了一段时间，这是我应用程序的核心。
我现在正在使用保持活动的方法。愚蠢的错误是，我只在声明路由时命名组件。
{ path: '/questions-list', name:"questions-list", component: require('./components/qa/Questions.vue')}
对于那些面临相同问题的人，您应该在组件导出对象中声明组件的名称，如下所示：
export default {
name: 'questions-list',
data () {
return {
}
}