Блог

Я только изучаю Vuetify и намерен использовать его для создания привлекательных компонентов Vue в Laravel. (Я также новичок в Laravel и Vue.) Я пытаюсь создать CRUD и использую v-таблицу Vuetify, описанную в конце страницы v-table в документах. При имитации этой модели возникли некоторые вопросы.

1. Модель использует v-dialog для отображения страниц создания и обновления, но в других местах документации авторы не рекомендуют использовать v-dialogs для большинства целей и специально одобряют его только для таких вещей, как оповещения. Будет ли создание / обновление страниц приемлемым использованием v-dialog или было бы лучше полностью перевести пользователя на отдельную страницу, а затем вернуться, когда создание или обновление завершится?
2. Модель отображает страницы создания и обновления на v-card, хотя это очень похоже на форму. Есть ли какая-либо причина предпочесть v-card v-form или наоборот в этой ситуации? (Я пробовал оба варианта, но у v-form был серьезный недостаток: форма была прозрачной, и я не мог понять, что сделало ее прозрачной или как снова сделать ее непрозрачной, поскольку ни один из реквизитов, похоже, не имеет к этому никакого отношения. Я не уверен, является ли v-form неизбежно прозрачным и, следовательно, его никогда не следует использовать в v-dialog или есть какая-то простая настройка, которая сделала бы его идеально пригодным для использования в v-dialog.)

чтобы сначала ответить на ваш второй вопрос: «v-card» — это просто визуальный компонент, который упрощает создание полей (карточек) для отображения некоторых элементов с заголовками и т. Д. «v-form», С другой стороны, преобразуется в тег «form» в html. вы можете использовать свои входные данные с формой или без нее, но ее использование имеет свои преимущества, но вы можете не использовать ее.
и для первого вопроса: существует так много лучших способов редактирования или обновления «v-data-table», чем «v-dialog», что вы можете и должны почти всегда избегать его использования для этого предложения. один из наиболее распространенных и приятных способов сделать это — использовать `v-alert` с `value` и `transition`, как это, но если вы хотите обновить строку из своей `v-data-table`, я предлагаю использовать ваши собственные шаблоны с `v-text-поле вместо простого `div` внутри `td` `v-if` с привязкой к логическому значению для каждого объекта, которое вы можете переключать с помощью кнопки. это будет что-то вроде этого :

шаблон:

 <v-data-table
  :headers="headers"
  :items="items"
>
  <template v-slot:item.myEditableCol="{ item  }" v-if="item.beingEdited">
     <v-text-field v-model="item.myEditableCol" />
  </template>
  <template v-slot:item.action="{ item  }">
     <v-icon
       class="mx-1"
       @click.stop="item.beingEdited = !item.beingEdited"
     >
    {{item.beingEdited?'mdi-check':'mdi-circle-edit-outline'}}
    </v-icon>
  </template>                    
</v-data-table>

 

и сценарий :

 headers: [
      {
        text: "ID",
        align: "start",
        value: "id",
      },
      {
        text: "Title",
        align: "start",
        value: "title",
      },
      {
        text: "Editable",
        align: "start",
        value: "myEditableCol",
      },
      {
        text: "CRUD",
        align: "start",
        value: "actions",
      },
    ],

items: [
      {
        id: 1,
        title: "row1",
        myEditableCol: "someValue1",
        beingEdited: false,
      },
      {
        id: 2,
        title: "row2",
        myEditableCol: "someValue2",
        beingEdited: false,
      },
      {
        id: 3,
        title: "row3",
        myEditableCol: "someValue3",
        beingEdited: false,
      },

    ],
 

в принципе, вы можете проявить творческий подход, используя «шаблоны» и «v-слот» в vuetify.
надеюсь, это может помочь.