@Stim7

Vuetify — как обратиться к чекбоксам?

Всем привет, как во Vuetify в компоненте v-data-table обратиться к слотам для изменения чекбоксов? Задача: при наступлении определенного события менять чекбоксы на лоадеры, как на скрине:
5fe4ae11b39dd047732615.png
Чекбоксы на item-ы ставятся из коробки с помощью show-select:

<v-data-table
      :headers='headers'
      :items='items'
      disable-pagination
      dense
      :show-select='showSelect'
      :hide-default-footer='true'
      item-key='action'
      v-model='selectedCheck'
    >
  • Вопрос задан
  • 67 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Добавляете в компонент свойство, которое будет указывать, случалось ли ваше событие. Если его значение false, тогда ничего не делаете, по умолчанию будет отрендерен чекбокс, если true - передаёте в соответствующий слот что там вам надо:

data: () => ({
  событиеНаступило: false,
  ...
}),

@событие="событиеНаступило = true"

<v-data-table>
  <template v-if="событиеНаступило" #item.data-table-select>
    здесь размещаете контент, который должен отображаться вместо чекбоксов
  </template>
  ...

Если же чебоксы должны заменяться на другой контент независимо для каждой строки, а не все сразу, тогда свойство, отвечающее за отображение чекбоксов, добавляете не одно общее непосредственно в компонент, а отдельное каждому элементу данных. И в зависимости от его значения делаете контентом слота чекбокс или что-то иное:

<v-data-table>
  <template #item.data-table-select="{ item, isSelected, select }">
    <div v-if="item.событиеНаступило">hello, world!!</div>
    <v-simple-checkbox
      v-else
      :value="isSelected"
      @input="select($event)"
    ></v-simple-checkbox>
  </template>
  ...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы