在vue JS渲染时更新数据值

发布于 2025-01-22 14:30:26 字数 1271 浏览 6 评论 0原文

我正在学习vuejs，并且在尝试通过“ Tabindex”属性通过选项卡（从一个Div跳到另一个Div）的页面时遇到了此错误。我现在遇到的问题是，页面上的所有divs均已条件，有时它们都可以在那里，但有时只有一个，依此类推……它们来自一系列哈希，类似的东西：

    (3) [{…}, {…}, {…}]
0: {name_old: "The name before",  name_new: "new name", created: "2022-04-19 17:18:36", type: 1, observation: "ok"}
1: {description_old: "old description", description_new: "new description", created: "2022-04-19 16:30:00", type: 1, observation: null}
2: {name_old: null, name_new: "The name before", description_old: null, description_new: "old description", impact_old: null, …}

基本上，保存表的更改的方法

这是我

  <v-timeline-item
    v-for="n in items"
    :key="n.item_id"
    small
    fill-dot
  >

从数据库中，因此我可以使

<div v-if="n.description_new && n.description_old" :tabIndex="(tab_idx+= 1)">

问题是，没有“ Tabindex”属性，基本上，我无法使用Tab键导航页面。

我在代码的“数据”部分上有一个名为“ TAB_IDX”的变量，用于计数当前的Tabindex值。（从9点开始，因为我在V-For之前有8个静态值）

  data: () => ({
   tab_idx: 9
  }),

但是我会得到此错误：

您可能在组件渲染函数中具有无限的更新循环

可以解决此问题吗？

PS：我尝试使用Prop作为TAB_IDX值，但我遇到了此错误。

“ tabindex” prop vue/no-mutating-props的意外突变

谢谢！

原文

I'm learning VueJS and I'm having this error while trying to make a page accessible through tabs (jumping from one Div to another) using the "tabIndex" property. The problem I'm having right now is that all the divs on the page are conditioned, sometimes they all can be there but sometimes only one, and so on... they come from an array of hashes, something like this:

    (3) [{…}, {…}, {…}]
0: {name_old: "The name before",  name_new: "new name", created: "2022-04-19 17:18:36", type: 1, observation: "ok"}
1: {description_old: "old description", description_new: "new description", created: "2022-04-19 16:30:00", type: 1, observation: null}
2: {name_old: null, name_new: "The name before", description_old: null, description_new: "old description", impact_old: null, …}

Basically, it's my way to save changes of a table from my database having the old and the new values...

So, I'm rendering this data with a v-for, something like this:

  <v-timeline-item
    v-for="n in items"
    :key="n.item_id"
    small
    fill-dot
  >

And I check if the element is null or not, so I can render it

<div v-if="n.description_new && n.description_old" :tabIndex="(tab_idx+= 1)">

The problem is, without the "tabIndex" property, basically, I cant navigate the page using the tab key.

I have on my "Data" part of the code a variable named "tab_idx" that I use for counting the current tabIndex value. (Starting it at 9 because I have 8 static values before the v-for)