Хорошая настройка tabIndex в VueJS при переборе нескольких объектов

У меня есть несколько вложенных объектов, которые мне нужно перебрать для создания входных данных. Я упростил это до примера ниже. Я хотел бы установить 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

Который работает, но кажется менее чем идеальным. Я знаю, что клавиша табуляции будет работать по назначению, если они будут последовательными, а промежутки кажутся нормальными. Но есть ли более чистый способ получить от 1 до 12 вместо чисел в шахматном порядке, которые у меня есть? По сути, как текущий индекс (x++ и т. д.) каждый раз, когда я нажимаю?

Я попытался установить int в «данных», а затем метод для его увеличения, но быстро бросился в бесконечный цикл повторного рендеринга.

Спасибо.


vuejs2 v-for
person Greg    schedule 03.07.2018    source источник
comment
Если я что-то не упустил, просто установив tabindex="0" для всех ваших <input> элементов, вы получите именно тот эффект, который вам нужен. С точки зрения доступности установка индексов табуляции, отличных от 0 или -1, как правило, плохая вещь.   -  person Stephen Thomas    schedule 04.07.2018
comment
Спасибо! Я использую атрибут порядка flexbox, чтобы изменить положение некоторых из этих элементов, поэтому, если они все равны 0, это приведет к некоторой случайной функциональности вкладок с точки зрения конечного пользователя. Я не хотел перегружать этот вопрос требованиями, так как я смогу (inc|dec) изменить числа по мере необходимости на основе порядка flexbox. Это для непубличного приложения, которое имеет массу полей ввода, поэтому удобство использования и доступность должны быть точно выяснены. Я сделаю больше исследований о том, что вы сказали о настройке индексов вкладок.   -  person Greg    schedule 05.07.2018
comment
На самом деле, если вы используете порядок flexbox, то это один из разумных вариантов использования ненулевого tabindex.   -  person Stephen Thomas    schedule 05.07.2018

Ответы (1)


arrow_upward
1
arrow_downward

для этого есть хитрость, но это хак, а не лучшая практика

Шаблон:

{{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;
}
person Daniel    schedule 03.07.2018
comment
Спасибо. Первый метод, который вы предложили, кажется немного хакерским, но работал именно так, как мне нужно. Как упоминалось в комментарии выше, мне пришлось немного манипулировать numItems на основе определенных условий из-за использования «порядка» flexbox для упорядочения входных данных, и я смог сделать это с вашим решением. - person Greg; 05.07.2018