Вопросы и ответы - vuetify.js
api arrays async-await autocomplete axios boolean bootstrap-4 bootstrap-vue button c# calendar captcha capybara card carousel combobox components computed-properties css css-animations css-grid css-transitions customization datatable datatables datatables-1.10 datepicker datetimepicker debounce dom-events drag-and-drop eslint events express fetch file-upload firebase firebase-authentication flexbox focus frontend google-signin header height highlightjs html html-table hyperlink icons if-statement image input intervals javascript jestjs js-scrollto json jsonschema jsx label laravel laravel-5 laravel-7 laravel-mix layout less loops markdown material-design menu microdata microsoft-edge mime-types navbar navigation nested node.js npm nuxt.js nuxtjs pagination parsefloat plotly reactjs responsive responsive-design right-to-left ruby-on-rails sass schema.org select selection selenium spring sql sql-server src storybook stripe-checkout stylus svg tabs textfield themes three.js time timepicker toggle toolbar transition transpiler treeview two-way-binding typescript uicomponents unit-testing v-autocomplete v-data-table v-for v-model v-select v-slot v-stepper validation vee-validate visibility vue-cli vue-cli-3 vue-cli-4 vue-component vue-resource vue-router vue-test-utils vue.js vuejs2 vuetify-loader vuetify-tabs vuetify.js vuex webpack
Есть ответ!
У меня есть три карты в одном ряду, но одна больше других, я хотел бы растянуть меньшую, чтобы заполнить все доступное вертикальное пространство, я пробовал с align="stretch" на v-row, но это не работает. Вот моя ручка
<v-container>
<v-row dense align="stretch">
<v-col cols="4">
<v-card>
<v-card-text class="green--te...
Есть ответ!
Я только начал изучать vue. Я хочу создать горизонтальное верхнее правое меню с помощью Vuetify.
Но вместо этого я набросал вертикальное меню. В документации Vuetify таких примеров нет. Нет точной реализации наиболее часто используемого меню. Как я могу настроить его так, чтобы он был горизонтальным?
Вот шаблон
<v-app>
<v-app-bar
app
color="primary"
light
>
...
Есть ответ!
Я хочу использовать v-simple-tble, компонент пользовательского интерфейса Vuetify.js, создавая таблицу, подобную следующей таблице.
Я создал следующий код с помощью codesandbox и проверил экран.
Как показано на рисунке ниже, заголовок отображается неровно.
HTML-код↓
<div id="app">
<v-app id="inspire">
<v-simple-table>
<template v-slot:defau...
Есть ответ!
Я пытаюсь использовать webp img вместо jpg или png img. Некоторые браузеры могут не поддерживать webp img, поэтому мы используем html-тег < source > для этого, чтобы убедиться, что есть хотя бы jpg img.
<picture>
<source srcset="good.webp" type="image/webp">
<img src="fallback.jpg" alt="">
</picture>
Однако я не знаю, к...
Есть ответ!
Знает ли кто-нибудь, как изменить очерченный цвет компонента v-text-field?
Нажмите на изображение
Есть ответ!
Компонент Vuetify v-data-table имеет функцию fixed-header, которая делает заголовок липким, когда height меньше высоты таблицы.
Он работает, когда height задан явно.
HTML:
<v-content id="mycontent">
<v-container fluid id="mycontainer">
<h2>Header</h2>
<div id="outer">
<v-data-table id="mytable" :headers="headers" :items="items...
Есть ответ!
Я пытаюсь изучать Laravel с VueJS, используя Homestead. Я решил использовать Vuetify в своем исследовании вместо Bootstrap, установив его через npm.
Вот мое приложение.JS:
import "material-design-icons-iconfont/dist/material-design-icons.css";
import "vuetify/dist/vuetify.min.css";
import Vue from "vue";
import Vuetify from "vuetify";
import App from "./components/App.vue";
import ExampleCompon...
Есть ответ!
У меня проблема с vuetify.
он не генерирует тег "img", вместо этого он генерирует тег" div "с" background-image", установленным в путь к изображению.
<v-img
v-if="index === 0"
:key="index"
:alt="ticket.name"
:src="image.thumbnail_images.large || '/images/icons/no_picture.jpg'"
:width="isPWA ? '' : $vuetify.breakpoint.lgO...
Есть ответ!
Я хочу использовать v-for nav items через мои полномочия и другие вещи.
это мой код.
<template v-for="(subItem, index2) in item.children">
<v-list-item sub-group link :to="subItem.link" exact v-if="item.auth === true" :key="index + '_sub_' + index2">
<v-list-item-title v-text="subItem.title" ></v-list-item-titl...
Есть ответ!
Я хотел изменить значок ввода v-файла и поместить его позади.
Поэтому я использовал "append-outer-icon", чтобы изменить значок и место, но
Если я нажму на значок, ничего не произойдет.
Я хотел нажать кнопку "Добавить-внешний-значок" и открыть папку, как нажать кнопку "добавить-значок".
Мой пример кода приведен ниже.
<template>
<v-file-input
prepend-icon=""
...
Есть ответ!
поиск по телефонному массиву не работает.
Я делаю таблицу на Vietify, я столкнулся с проблемой-поиск не работает, если мне нужно искать по массиву, я не могу понять, как решить эту проблему. Пожалуйста помочь.
шаблон:
<div id="app">
<v-app>
<v-card>
<v-card-title>
<!-- search form -->
<v-text-field
v-model="...
Есть ответ!
Я использую Vuetify в интерфейсе и Laravel в бэкэнде. Я пытаюсь создать динамическую таблицу, в которой пользователь может сам задавать имена столбцов. Поэтому я создал форму с циклом для 2 полей:
<template>
<div>
<v-card>
<v-card-text>
<v-row v-for="n in numTextFields" align="center">
&...
Есть ответ!
Я пытаюсь создать JSON-файл, в котором я храню все ответы из формы. Некоторые входные данные имеют дополнительный атрибут набора данных (data-tag). Когда я сохраняю форму, я хочу извлечь все эти "теги" в файле JSON в виде ключей и значения входного значения. Я попытался сделать это, добавив refferencies к этим входным данным и взяв имя тега с помощью $refs.
Я получаю ошибку:
Ошибка в обработчике v...
Есть ответ!
При нажатии на кнопку открываются сведения о строке. Когда открывается еще одна деталь строки, Я хочу убедиться, что открытые детали закрыты. Одна деталь линии должна оставаться открытой
пример скриншота
Как вы можете видеть в примере, существует более одной строки, в то время как деталь в первой строке открыта, я хочу, чтобы деталь во второй строке была закрыта.
<b-table
show-empty
sma...
Есть ответ!
У меня есть набор изображений с некоторой информацией, такой как автор, и теперь я добавляю несколько кнопок, чтобы позволить пользователям любить изображения.
Поскольку изображение имеет ссылку на экран изображений, я не знаю, как вызвать кнопку, избегающую запуска ссылки.
Вот код, я использую Vuetify и Nuxt:
<nuxt-link
:to="
`/photo/${slotProps.item.id}/${
slotProps.item.slug...
Есть ответ!
я пишу такую форму с помощью vuetify.
<v-form>
<v-text-field
autocomplete="off"
v-model="model.password"
:label="formschema.password.label"
:rules="[rules.required, rules.min]"
:append-icon="formschema.password.show ? 'mdi-eye' : 'mdi-eye-off'"
@click:appe...
Есть ответ!
Я создаю сайт электронного обучения с использованием Vuetify и axios. Вот мои коды
Курсы.Вью
<template>
<div>
<v-container>
<v-row>
<v-col md="3" offset-lg="1">
<Categories />
</v-col>
<v-col md="9" lg="7">
<CourseList v-bind:courses="cou...
Есть ответ!
Я пытаюсь центрировать n количество v-cols с интервалом слева и справа от cols, но не могу центрировать v-cols, выровненный с вышеупомянутым v-cols. Обратите внимание, что отзывчивость работает так, как задумано, но при максимальном размере экрана я хочу ограничить его двумя v-cols и выровнять его по другим горизонтальным длинам v-row, сохраняя при этом одинаковые длины v-cols.
В настоящее время я...
Есть ответ!
Я новичок в этом деле. Vue.js и я борюсь с этой простой вещью.
Я хотел бы разместить кнопку Vuetify на своей странице и указать на файл, который пользователь может загрузить. Часть href-это то, где для меня ничего не работает. Загружаемый файл помещается в папку /assets.
<v-btn
class="ma-2"
outlined
href="../assets/file.pdf"
target="_blank">
...
Есть ответ!
Я надеялся решить эту проблему самостоятельно, но я полностью застрял. Любая помощь приветствуется. В принципе, этот компонент печатает матрицу 100x10, такую как эта:
Threat1: AssetType1 AssetType2 AssetType3 AssetType4 [...]
Threat2: AssetType1 AssetType2 AssetType3 AssetType4 [...]
Threat3: AssetType1 AssetType2 AssetType3 AssetType4 [...]
Threat4: AssetType1 AssetType2 AssetType3 AssetType4 [...