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

Question

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

<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>

将我的 tabindex 设置为 0、1、2、3 等的最佳方法是什么？我发现在 v-for 上设置第三个 arg 提供了一个数字索引，但我得到的似乎有点令人费解。有没有更好的方法可以解决这个问题？

以上结果如下所示：

[___________] 0
[___________] 1
[___________] 2
[___________] 10
[___________] 11
[___________] 12
[___________] 100
[___________] 101
[___________] 102
[___________] 110
[___________] 111
[___________] 112

哪个有效，但似乎不太理想。我知道如果 Tab 键是连续的并且间隙看起来很好，它们将按预期工作。但是有没有一种更简洁的方法可以让我得到 1 到 12 而不是我得到的交错数字？基本上就像每次我点击时的运行索引（x++ 等）？

我尝试在 'data' 中设置一个整数，然后使用一种方法来增加它，但很快就陷入了无限重新渲染循环。

谢谢。

Answer 1

有一个技巧可以做到这一点，但这是一个技巧，并不是最佳实践

模板：

{{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>

脚本hide过滤器定义

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

您不需要隐藏过滤器，但它确保您在定义期间不会将任何内容放入模板。您还可以在 data 中定义 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;
}

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

Setting tabIndex nicely in VueJS when iterating over multiple objects

vuejs2

v-for