Vuejs2 迭代多个对象时，在VueJS中很好地设置tabIndex

我需要迭代几个嵌套对象来创建输入。我把它简化为下面的一个例子。我想在这些输入中设置tabindex

<div v-for="(iv, ik, ii) in {a: 'x', b: 'x'}" :key="ii">
  <div v-for="(jv, jk, ji) in {a: 'y', b: 'y'}" :key="ji">
    <div v-for="(kv, kk, ki) in {a: 'z', b: 'z', c: 'z'}" :key="ki">
      <input type="text" :tabindex="(ii * 100) + (ji * 10) + ki" />
      <label>{{(ii * 100) + (ji * 10) + ki}}</label>
    </div>
  </div>
</div>

这是可行的，但似乎不太理想。我知道，如果tab键是连续的，并且间隔看起来很好，那么它将按预期工作。但是，有没有更干净的方法可以让我得到1到12，而不是交错的数字？基本上就像每次我点击鼠标时运行的索引（x++，等等）

我尝试在“数据”中设置一个int，然后使用一个方法来增加它，但很快我就陷入了无限重渲染循环

---

谢谢

这样做是有诀窍的，但这是一种黑客行为，并不完全是一种最佳做法

模板：

{{numitems = 0 | hide}}
<div v-for="(iv, ik, ii) in {a: 'x', b: 'x'}" :key="ii">
  <div v-for="(jv, jk, ji) in {a: 'y', b: 'y'}" :key="ji">
    <div v-for="(kv, kk, ki) in {a: 'z', b: 'z', c: 'z'}" :key="ki">
      <input type="text" :tabindex="numitems += 1" />
      <label>{{(ii * 100) + (ji * 10) + ki}}</label>
    </div>
  </div>
</div>

您不需要隐藏过滤器，但它可以确保在定义过程中不会将任何内容放入模板中。您还可以在

数据

中定义

numitems

。并使用重置和增量的方法

---

另一个选项是设置一个计算值，该值使用生成的数字作为增量值的索引，没有任何间隙

每当对象的关键帧发生更改时，都可以进行计算，使用方法或使用对象生成关键帧

下面是一个使用

${ik}{jk}{kk}

作为键的示例

tabIndexVals(): {
  let c = 0;
  let o = {};
  Object.keys(i).forEach(ik => {
    Object.keys(i[ik]).forEach(jk => {
      Object.keys(i[ik][jk]).forEach(kk => {
        let key = `${ik}_${jk}_${kk}`;
        o[key] = c;
        c++;
      })
    })
  })
  return o;
}

---

除非我遗漏了什么，只要在所有

元素上设置

tabindex=“0”

，就会产生您想要的效果。从可访问性的角度来看，设置选项卡索引而不是0或-1通常是一件坏事。谢谢！我使用flexbox“order”属性来重新定位其中一些项，因此从最终用户的角度来看，将它们全部设置为0将导致一些“随机”选项卡功能。我不想让这个问题充斥着需求，因为我将能够（inc | dec）根据flexbox订购的需要重新计算数字。这是针对一个拥有大量输入字段的非公共应用程序，因此必须确定可用性和可访问性。我会对你所说的设置选项卡索引做更多的研究。事实上，如果你使用flexbox order，那么这是非零TabIndex的合理使用案例之一谢谢。你建议的第一种方法确实有点老套，但它完全按照我的需要工作。正如在上面的评论中提到的，由于使用flexbox“order”来安排输入，我不得不基于某些条件对numitem进行一些操作，而我能够使用您的解决方案来实现这一点。

filters: {
  hide: function(value){
    return ''
  }
}

tabIndexVals(): {
  let c = 0;
  let o = {};
  Object.keys(i).forEach(ik => {
    Object.keys(i[ik]).forEach(jk => {
      Object.keys(i[ik][jk]).forEach(kk => {
        let key = `${ik}_${jk}_${kk}`;
        o[key] = c;
        c++;
      })
    })
  })
  return o;
}