Отображать несколько флажков в табличном формате, используя <v-for> и <v-checkbox> в Vuetify? - PullRequest
Новая
       38

Отображать несколько флажков в табличном формате, используя <v-for> и <v-checkbox> в Vuetify?

0 голосов
/ 27 июня 2018

Я использую VuetifyJs для VueJS, и я пытаюсь отобразить флажок в табличном формате из массива объектов. Желаемый выход , показанный ниже:

enter image description here

Когда установлен флажок «Все пользователи», необходимо установить все флажки.

<Ч />

Я создал макет строки и разделил эту строку на два гибких блока, чтобы у меня была структура строки с двумя столбцами. Я зацикливаюсь, используя 'v-for', и для каждой строки отображается значение текущего индекса и следующего индекса. Но последняя запись повторяется при следующей итерации цикла. Самое близкое, что я мог достичь, как показано ниже:

enter image description here

<Ч />

URL-адрес CodePen: https://codepen.io/dhnsh/pen/ZRMgoE

Я также пытался использовать table вместо layout и flex, но не смог сделать это. В коде я использую функцию 'checkLength', чтобы получить следующий индекс, потому что увеличение индекса с помощью оператора предварительного увеличения дает ошибку (вероятно, из-за того, что массив выходит за границы).

<ч /> Я борюсь со следующими запросами:

1) Как мы можем отобразить желаемый результат в Vuetify?

2) Есть ли в любом случае итерация «v-for» с приращением «2», как мы можем сделать в Javascript? например: 

    for(var i=0;i<array.length();i += 2)

1 Ответ

0 голосов
/ 27 июня 2018

Вы должны поставить v-layout вне v-for

  <div class="mr-4 ml-4 whiteback userGroupHeight">
          <v-layout row wrap>
                <v-flex v-for="(category,index) in types" :key="types[index].text" xs6>
                  <v-checkbox light :label="category.text" v-model="category.selected">
                  </v-checkbox>
                </v-flex>
          </v-layout>
</div>

, тогда вам не нужно использовать checkLength метод.

Демо: https://codepen.io/ittus/pen/ZRqYME

...