Javascript 具有出厂功能的Vue组件v-for

我正在创建一个表组件，并对所有逻辑使用工厂函数。在

v-for

中，我为每行的每个项目创建一个单元格

工厂

这是我在vue页面中需要导入的实际工厂。我只是在这里添加了相关代码

consttabledata=（数据）=>{
常量方法={
'getRows'：（）=>{
常量结果=[]
for（设i=0，end=data.length；i{
常量方法={
'getCells'：（）=>{
常量结果=[]
for（让colIndex=0，end=parent.getColumnCount（）；colIndex{
设活动=假
常量方法={
‘悬停’：（）=>{
活动=！活动
},
“isActive”：（=>{
返回活动
}
}
返回方法
}

组件

所以在组件下面

{{col}}
{{cell.getValue（）}}
从“vuex”导入{mapActions，mapGetters}；
/*表数据工厂*/
从“~/plugins/library/table/data_new.js”导入TableData；
导出默认值{
数据（）{
返回{
表：空
};
},
方法：{
异步获取（）{
/*这里我从API获取数据（fetchedData是一个数组）*/
this.data=fetchedData
如果（这个数据）{
this.table=TableData（this.data）
}否则{
console.error（'没有数据'）
}
}
},
计算：{
列（）{
返回此.table.getColumns（）
},
行（）{
返回此.table.getRows（）
}
},
安装的（）{
this.fetch（）
}
};

我希望发生的是，当我将单元格悬停在表中时（将单元格的活动状态设置为true），类也会切换

：class=“{active:cell.isActive（）”

类道具不关注细胞工厂中的变化。我理解这一点，但我不知道如何使其反应。我已经尝试和寻找了一段时间来寻找解决方案，但没有成功

---

希望有人能进一步帮助我，提前谢谢！

在我看来问题出在这里=>

cell.isActive（）

因为您返回的是一个函数，而不是一个被动变量，所以没有任何迹象表明存在更改。现在您可以使用

forceUpdate（）强制更新

，但随后您将重新绘制所有单元格，这是非常低效的。如果可能的话，您应该尝试不使用函数作为渲染的一部分，尤其是在循环中，因为它们在每次绘制时都会被触发

我的首选方法是不让单个组件管理它们自己的状态，而是使用嵌套的对象/数组状态来处理列、行和/或单元格的数据。但我假设这不是您想要的

如果您可以使用computed，那么您就可以在不调用函数的情况下实现反应性。如果您使用的是vue 2.6+，那么您可以通过DIY的方式添加反应性。从vue 2.6开始，它可以定义独立的观察值，您可以使用它来存储和改变状态，并生成计算字段

您还应该将此应用于其他工厂，例如

row.getCells（）

将重新生成所有数据，因为它不保存任何状态

未经测试的代码：

consttablecell=（父、行索引、列索引）=>{
常数状态=Vue.可观察({
活动：错误
});
计算常数={
isActive:（）=>state.active，
}
常量方法={
悬停：（）=>{
活动=！活动；
},
};
//返回所有合并名称（需要注意重叠名称）
返回{…状态，…计算，…方法}；
};

这样，您应该能够使用

cell.isActive

并使其对更改做出反应

另一方面，如果您希望以这种方式使用Vue，您可能会受益于VUE3（最近在beta版中发布）中的更改，即API组合，它支持组件组合