时间戳

首页 > 解决方案 > 遍历多个对象时在 VueJS 中很好地设置 tabIndex

vuejs2 - 遍历多个对象时在 VueJS 中很好地设置 tabIndex

问题描述

我有几个嵌套对象需要迭代以创建输入。我将其简化为下面的示例。我想在这些输入中设置 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 上设置第三个参数提供了一个数字索引，但我得到的似乎有点令人费解。有没有更好的方法可以解决这个问题？

以上结果输出如下：

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

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

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

谢谢。

标签： vuejs2v-for

解决方案

这样做有一个技巧，但这是一种技巧，而不是最佳实践

模板：

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

您不需要隐藏过滤器，但它确保您在定义期间不会将任何内容放入模板中。您也可以numitems在 中定义data。并使用方法来重置和递增。

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

每当您的对象的键发生变化时，您都可以进行计算，使用您的方法或使用对象生成键。

${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;
}

推荐阅读