小编Jan*_*nne的帖子

我正在尝试在Vue 2上为大型半复杂对象集合实现一个表视图.基本上我的想法是从DB到JS缓存中收集5万到10万行之间的任何行,然后动态分析它以构建表 - 使用实时过滤器(文本搜索)查看.表中的每一行都是可切换的,这意味着单击该行可将行更改为编辑模式,从而为该特定字段/单元格启用类似Excel的编辑.

每个对象具有大约100-150个字段/属性,但是在表中的任何给定时刻仅显示一定量的'em'(表列可以实时切换).对于大型数据集,似乎DB正在推动大约10-100mb的JSON数据,在这个用例中是可以接受的.Renderwise性能不是问题 - 过滤器工作得足够快,只有有限数量的结果呈现给DOM.

一切都已经工作,过滤,列出~100行反对过滤器(+"显示100多" - 机制等),但是当我将大约8000个对象加载到数组中时,我达到了内存限制.这似乎保留了2千兆字节的RAM,这是在Chrome停止运行JS代码之后(尽管很奇怪,我没有得到任何警告/错误).

我对行的内存使用情况进行了基准测试,似乎~1000行保留了大约300mb的内存.这很可能由Vue反应观察者保留.

三个问题:

1. 是有办法来切换为特定于阵列的列表对象的反应性(由指数或这样),所以该阵列内的对象本身是未观察到的/非易变的,除非特别称为成为可变的(即,当用户点击行,这使编辑 - 模式)？
2. 你如何为Vue实现大数据集的处理,因为反应似乎是内存使用的瓶颈？请不要建议"限制后端内的结果",因为它不是我在这里寻求的解决方案(即使我可能需要创建两部分过滤,一个用于获取较小的初始数据集,一个用于实时过滤).基本上我试图通过用Vue重新思考数据架构来将"内存结束"的界限从8 000 - > 8 000推到极限.将数据集存储在Vue的数据变量中作为被动的唯一问题是什么？
3. 一个想法我是把这一"项目" -dataset到不可观测/非反应与Object.freeze或一些类似的做法,并有表呈现两个数据集:一个用于非反应性,一个用于那些目前在其内编辑模式(单击行时将被推送到"editableItems"数据集)...这里有任何建议(更简单,所以我能够处理一个数组中的所有内容？)

我已经在Angular 1上做了类似的应用程序,并且它处理了5万行,所以我确信它应该在Vue 2中也是可行的......应该只是找到处理反应性的方法.

我正在尝试找到一种方法来绑定 Vue select-element 中的对象数组。情况大致如下：

data: {
  ideas: [
    { id: 1, code: "01A", text: "option 1", props: [] }, 
    { id: 2, code: "02A", text: "option 2 , props: [{ details: "something" }]}
  ]},
  currentForm: {
    something: "foo",
    else: "bar",
    ideaCode: "01A",
    text: "option 1"
  }
];

...在 HTML 中...

<select v-model="currentForm.ideaCode" @change="setCodeAndLabelForForm(???)">
  <option v-for="i in ideas" value="i">{{ i.text }}<option>
</select>

基本上我需要能够跟踪用户选择的对象，触发我自己的更改事件，同时与另一个对象的单个键绑定...所选值/引用键应该与用户选择的选项/分开目的。注意：currentForm 与选项的对象类型不同！它只包含选项恰好具有的一些属性，并且我试图通过触发用户选择的更改事件来将其转移到选项。

问题是我还没有弄清楚如何传递函数当前选定的值或如何编写如下内容：

<select v-model="selectedIdea" @change="setCodeAndLabelForForm" :track-by="currentForm.ideaCode">
  <option v-for="i in ideas" value="i">{{ i.text }}<option>
</select>

一种可能的（并且可行的）方法是： …

请尝试阅读并回答所提出的问题，而不是建议对公共路由进行改进，而这并不是偶然的。

编辑#5（更新@2021年10月20日）不幸的是，这个问题仍然没有答案。我真的对此感到困惑，但更重要的是，过去几天没有出现此错误，我不知道发生了什么。

我曾经有自定义静态“User::hasRole(['...']”方法，每次检查角色时都会获取用户 userRoles。我所做的最大更改是将用户角色缓存到会话中，这样就不会出现每次都需要获取它们（因为数十个剩余查询指的是作为查询构建器过滤器的一部分一遍又一遍地检查数据库中的角色）。

$userRoles = Session()->get('userRoles', function() {
    $user = User::with(['userRoles'])->find(Auth::user()->id);
    Session()->put('userRoles', $user->userRoles);
    return $user->userRoles;
});

我知道这个解决方案可能会在某些时候引起问题，但由于我的项目的性质，它几乎不存在风险。

这些随机错误似乎从来没有指向某种特定的方法，也没有任何东西指向这个方向。看起来这个错误仍然是一个谜，但目前它不再引起问题。我能猜测到的最好情况是，并行的 PHP/SQL 线程太多，这会导致内核管道在身份验证失败时在随机状态下失败。

感谢所有试图提供帮助的人。

编辑#4（更新@ 14.9.2021）将缓存驱动程序从文件更改为阵列并不能解决问题。即使用户已通过身份验证，单个端点也仅返回“未经身份验证”消息。

编辑#3，问题仍然存在，尝试总结：

• 密钥已生成，甚至重新生成多次
• Laravel 8、XAMPP
• 已多次运行 config:cache 。如果配置缓存已被清除，则问题会更频繁地发生，但目前可能有 1/100-200 个 REST 调用或多或少随机地最终失败。这不会发生在 LAMP 生产服务器上。
• 此问题会导致随机不同的错误，所有错误都与用户会话有关
• 没有应用程序加密密钥
• 401 - 未经身份验证
• SQL 连接错误（尽管刷新页面/重新运行帖子就像一个魅力，并且单页加载上的约 20 个 REST 操作中只有 1 个可能最终会达到此状态）。
• 似乎不是 CSRF 令牌相关的错误，因为会话处于活动状态（因为其他 REST 调用没有失败），但由于某种原因，每当发生此错误时，Axios 不会在响应标头上报告 XSRF 令牌。令牌存在于请求标头中...看起来后端仍然无法找到会话？
• 目前使用基于文件的会话处理，将尝试基于内存

--

我一直遇到 Laravel 生成 HTTP 代码 500 的问题 - “未指定应用程序加密密钥” - 在我的休息路由上随机出现错误。当然，我已经设置了，甚至用 Artisan 重置了密钥，所以这不应该是问题。

自从我在 Laravel 6 上开始我的项目以来，这个问题就一直存在。很快我就能够跟踪缓存问题。基本上，当使用“php …

编辑2:

问题似乎存在于"bigTable"元素的规则上.显然,当在布局模板上使用时,它会继承错误的最小宽度.我还在调查这个.

不过,我还要再试一次div.一个大问题是使用固定导航和动态内容,但我已经找到了圣杯 - 解决方案(http://alistapart.com/article/holygrail).

感谢您的建议和所有可爱的trolololo.

编辑:

我将此问题复制到http://jsbin.com/eyitij/4/edit

我有一个表+ td宽度的奇怪问题.我有类似这样的代码:

<table class="mainLayout" style="width: 100%;">
    <tr>
        <td style="width: 250px;">
            <div id="leftNavigationPanel"> * content * </div>
        </td>
        <td id="panelCell">
            <div class="panel">
                 <table id="bigTable" width="100%"> * LOTS OF CONTENT, includes big table * </table>
            </div>
        </td>
    <tr>
</table>

当我在浏览器上运行此代码时,mainLayout会溢出,因此它变为3600px,这是因为Panel内的大表.

我指的大表可以包含在屏幕内.这样做,它得到水平滚动条(这是我想要的).如果将大表加载到具有规则"width:100%"的单独html文件中,则此方法有效.

在添加mainLayout规则"display:block;"之后,mainLayout表被渲染为~1800px并且包含在屏幕内,但问题是"panelCell"-TD仍然是~3400px宽,所以我仍然有整页滚动.. TD不包含在表中,但总是扩展到250px + bigTable.width()!

基本上浏览器不知道如何计算"panelCell"只填充:window.width - leftNavigationPanel.

任何想法如何制作正确的规则,而不使用"panelCell"的javascript +预先计算的最大宽度规则？

• panelCell必须包含在窗口中
  
• bigTable必须包含在panelCell中,并带有滚动条