Настройка tabIndex в VueJS при переборе нескольких объектов - PullRequest
Новая
       12

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

0 голосов
/ 03 июля 2018

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

Спасибо.

1 Ответ

0 голосов
/ 03 июля 2018

есть хитрость, но это взлом, и не совсем лучшая практика

Шаблон: 

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

script 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;
}
...