¿Como dar estilo al primer ítem seleccionado desde un Combobox con Vuetify?

Buen día comunidad les comento, estoy intentando agregar un estilo al primer ítem que se selecciona a través de un Combobox Component usando Vuetify, recordando que siempre y cuando los demás items mantengan sus estilos, solo se dará estilo al primer ítem que se selecciona, y resaltando que no importa el orden que se selecciona los items, siempre se dará un estilo al primer ítem seleccionado.

Llevo un avance en lo cual, solo realizó modificaciones de estilos usando solo CSS, pero tengo un poco el conocimiento que también interviene Javascript para obtener el primer ítem, hasta ahora no tengo idea de como lograr eso.

Muestro la imagen, donde espero aplicar la solución: Avance del problema

Como se aprecia, a través de CSS logro dar estilos a los items, pero no es lo que espero, porque aplica estilos a todo los items seleccionados.

Muestro el fragmento de código de la estructura del Componente Combobox:

<v-combobox    class="specialitySelect"    v-model="speciality"    :items="especialidad_items"    suffix="Especialidad"    menu-props="auto"    color="deep-purple darken-1"    multiple    single-line    hide-details    chips    box    ></v-combobox> 

Código CSS para dar estilos a los items del Lista de especialidades:

.v-menu__content .v-select-list .v-list .v-list__tile--active:first-child {   background: yellow; } 

Espero de su grata ayuda.

Problema ao chamar componente de navegaçao do vuetify com laravel

Instalei o laravel e posteriormente instalei o vuetify. O componte de modal do vuetify funciona normalmente. Porém quando eu tento chamar o componente de navegaçao ele acusa os seguintes erros inserir a descrição da imagem aqui

O estranha que um componente funciona e o outro não. A configuração do meu app pelo que sei, está normal.

import Vue from 'vue'; import Vuetify from 'vuetify'; Vue.use(Vuetify); 

Vue cannot find the dynamic source of the vuetify v-img element

I need to load an image (from my file system and not url) dynamically with vuetify. However, when I bind a path variable in v-img element, vue cannot find it. When I put it statically using the “required” method, it is ok.

How can I choose a dynamic path with vuetify? Is this a problem with the file loader?

I expect to select the image in run time dynamically. For example, if I have “next” button, I want to load the next image. Here is the code in Vue.js

<html> '''                     <v-img                          v-bind:src="require(myPath)"                         aspect-ratio="1.5"                         max-height="500"                        contain                     /> ''' </html>  <script> '''' data: () => ({         mycount: 1,         myPath: "../myimages/2.png" }) ''' </script> 

[Vue warn]: Error in render: “Error: Cannot find module ‘../myiamges/2.png'” found in —> at src/App.vue vue.runtime.esm.js:619 Error: “Cannot find module ‘../imyimages/2.png'” webpackEmptyContext components sync:2 render Gamesheet.vue:30 VueJS 21 run es6.promise.js:75 notify es6.promise.js:92 flush _microtask.js:18 vue.runtime.esm.js:1888

Модификация css стилей жестко прописанных в .styl vuetify

Как я могу переопределить стили компонента vuetify заданные жестко в .styl файлах допустим в исходника среды есть css правило для некоего селектора:

  .....       &--outline     position: relative      & > .v-input__control > .v-input__slot       align-items: stretch       min-height: 56px <<<    

как я могу переопределить это свойство на уровне самого vuetify? Первое что приходит в голову – это использовать директиву scoped. Однако в таком случае мне придется в каждом моем компоненте, где я использую нужный мне компонент vuetify cнова и снова переопределять стили используя директиву scoped.
Либо – же более гибким способом: подключить к себе в main.styl нужный мне исходник и изменить правило в селекторе.
Либо же отнаследоваться от инстанса этого компонента и переопределить методы назначающие классы css.
Какой путь выбрать?

Vuetify asynchronous autocomplete issue

I have some very weird issue with vuetify’s v-autocomplete component. The data is fetched asynchronously. The fetch is successful, getting the correct data but the component won’t render the data. You have to un-focus then re-focus to see the data and the next search still shows that data previously fetched at the first get results, probably an issue with cache. Here is the component code:

<v-autocomplete     v-model="selected"     :loading="loading"     :items="fetched_data"     :search-input.sync="search"     @change="dataSelected()"     placeholder="here"     color="black"     class="black--text"     flat     item-text="name"     item-value="id"     hide-no-data     outline     hide-details     label="Search"     return-object ></v-autocomplete> 

¿Como combinar celdas del encabezado de una tabla, utilizando vuetify?

Actualmente lleno la siguiente tabla:

    <v-data-table         :headers="headers_detInventario"         :items="detalle_inventario"         :search="search"         :rows-per-page-items="rowsPerPageItems"         :pagination.sync="pagination"         class="elevation-1"         no-data-text="No hay registros" >      <template v-slot:items="props">         <td class="text-xs-center">{{ props.item.nombre }}</td>         <td class="text-xs-center">{{ props.item.cantidad }}</td>         <td class="text-xs-center">{{ props.item.precio }}</td>         <td class="text-xs-center">{{ props.item.codigo }}</td>         <td class="text-xs-center">{{ props.item.descuento }}</td>         <td class="text-xs-center">{{ props.item.total_fila }}</td>       </template> </v-data-table> 

y el encabezado se llena de la siguiente forma:

headers_detInventario:[                 {                     text: 'Fecha',                     align: 'left',                     value: 'fecha'                 },                 { text: 'Detalle', value: 'detalle'},                 { text: 'Valor unitario', value: 'valor_unitario' },                 { text: 'Entrada', value: 'entrada', colspan: '2'                  },                 { text: 'Cantidad', value: 'cantidad' },                 { text: 'Acciones', value: 'name', sortable: false }             ], 

Por lo tanto visualmente queda así: introducir la descripción de la imagen aquí

pero necesito que quede de la siguiente forma su encabezado: introducir la descripción de la imagen aquí

Adding an image to a toolbar in a Vue + Vuetify Single File Compnonent

I’m essentially just remixing the code available here for a side project: https://github.com/aws-samples/aws-ai-qna-bot.git

Problem: I’m trying to insert a centered logo in the toolbar between the app drawer and the logout button. Typically I could accomplish this pretty easily with vanilla HTML and CSS, but this project is leveraging Vue.js and Vuetify, which I’m doing my best to get myself up to speed with.

I’ve referenced the following documents, including the README.md in the git repo:

https://vuetifyjs.com/en/components/images

https://vuejs.org/v2/guide/single-file-components.html

File path: qna-bot-template/website/js/admin.vue

<template lang="pug">   v-app     v-navigation-drawer(temporary v-model="drawer" app)       v-toolbar(flat)         v-list           v-list-tile             v-list-tile-title.title Tools       v-divider       v-list(dense three-line subheader)         v-list-tile(v-for="(page,key) in pages" :key="key"           @click="drawer=false"            :href="page.href"           :id="'page-link-'+page.id"           :target="page.target || '_self'")            v-list-tile-avatar             v-icon(color="primary") {{page.icon}}           v-list-tile-content             v-list-tile-title {{page.title}}             v-list-tile-sub-title {{page.subTitle}}         v-list-group( prepend-icon="info" value="true" color="primary")           v-list-tile(slot="activator")              v-list-tile-title QnABot Help           v-list-tile             v-list-tile-content                v-list-tile-title Version: {{Version}}               v-list-tile-title BuildDate: {{BuildDate}}           v-list-tile             v-list-tile-content               v-list-tile-title                  a(href="https://amazon.com/qnabot" target="_blank") General Instructions / QnABot Blog Post               v-list-tile-title                 a(href="https://aws.amazon.com/blogs/machine-learning/creating-virtual-guided-navigation-using-a-question-and-answer-bot-with-amazon-lex-and-amazon-alexa/" target="_blank") Guided Navigation using QnABot               v-list-tile-title                 a(href="https://aws.amazon.com/blogs/machine-learning/create-a-questionnaire-bot-with-amazon-lex-and-amazon-alexa/" target="_blank") Create a questionnaire using QnABot     v-toolbar(app fixed)       v-toolbar-side-icon.primary--text(         id="nav-open"         @click.stop="drawer = !drawer"       )       v-toolbar-title          v-breadcrumbs           v-breadcrumbs-item(href='#/edit') {{$  store.state.info.StackName}}:{{$  store.state.user.name}}           v-breadcrumbs-item {{page}}       v-spacer       v-toolbar-items         v-btn.primary--text(flat           id="logout-button"           @click="logout"           v-if="login") LogOut     v-container(fluid id="workspace")       v-layout(column)         v-flex           router-view     v-footer </template> 

So far I’ve tried following the following syntax, which I added right after the v-spacer toward the bottom of the wrapping template tags.

v-container   v-img(:src="/abc/xyz") 

and this doesn’t seem to be working.

Lastly I’ll add that since this environment is deployed to an EC2 instance (don’t think you can deploy it locally to prototype via vue serve or at least I haven’t been able to), I’m having to do this very roundabout way of prototyping by deploying this S3 bucket where the webpages are built to, then I make this webpack listener which will see whenever I modify a file. Then I can refresh the index.html that is built in the S3 bucket to see my changes. Extremely clunky workflow, I know, but I’ve never worked in an environment like this so I’m not sure if there’s a better way, plus the readme provided in the github repo is very light on details for how to modify the default layout.

Any help/pointers would be greatly appreciated.

Looping il8n in vuetify

I integrated the il8n in my nuxt app with veutify. However, Im trying to change my v list to an il8n path but I’m having trouble in looping it. I want this code

:to=”$ i18n.path(‘/’)”

in my v-list to apply the il8n link. Thanks in advance!

export default {   data() {     return {         items: [         { title: "HOME", to: "/" },         { title: "MENU", to: "/menu" },         { title: "LOCATIONS", to: "/location" },         { title: "ABOUT US", to: "/about" },         { title: "RESERVATIONS", to: "/reservation" }       ]     };   } };
  <v-list-tile           active-class="tabred"           :ripple="{ class:'orange--text' }"           v-for="(item, i) in items"           :to="item.to"           :key="i"           router           nuxt           exact         > </v-list-tile>

Mostrar botão somente quando a barra de rolagem descer, usando vuetify

Olá. Estou criando um botão “vá para o topo da página”, usando vuetify. Já consigo fazer ele ir ao topo com o seguinte código:

@click="$  vuetify.goTo(0,0) 

Mas agora eu gostaria que ele somente aparecesse se eu rolar um pouco a página para baixo.

Tentei isso:

data() {    topo: 0 }  methods: {  sumir(){    this.topo = window.pageYOffset || document.documentElement.scrollTop  } } 

e depois fiz no botao:

:v-show ="topo > 100" ou  v-show ="topo > 100" 

ambos sem sucesso. Alguém poderia ajudar?