Side by side input with vuetify form - vue.js

It's possible to put one or more input control side by side with v-form?
tks
this is my code, i wanna to make the textedit side by side (2 in each line)
<v-form ref="form" v-model="valid">
<v-select
:items="especialidades"
v-model="especialidadeSelecionada"
item-value="cdCartorioNatureza"
item-text="nome"
label="Especialidade"
:rules="[v => !!v || 'Campo obrigatório']"
#change="buscarServicos"
placeholder="Selecione uma especialidade"
required
></v-select>
<v-select
:items="servicos"
v-model="servicoSelecionado"
label="Servico"
ref="servicos"
:placeholder="placeholderServicos"
item-value="value"
item-text="nome"
:rules="[v => !!v || 'Campo obrigatório']"
required
></v-select>
<v-select
:items="formaCalculos"
v-model="formaCalculoSelecionada"
label="Forma de calculo"
placeholder="Selecione a forma de calculo"
item-value="cdDivisor"
item-text="nmDivisor"
:rules="[v => !!v || 'Campo obrigatório']"
required
></v-select>
<v-text-field
v-model.number="quantidade"
label="Quantidade"
mask="###"
required
:rules="quantidadeRules"
></v-text-field>
<v-text-field
v-model.number="valorBase"
label="Valor Base"
mask="###.###,##"
required
></v-text-field>
<v-text-field
v-model.number="protocolo"
label="Protocolo"
></v-text-field>
<v-btn color="error" #click.stop="limparForm">Limpar</v-btn>
<v-btn color="info" #click.stop="verificarProtocolo" :disabled="!valid">
Adicionar</v-btn>
</v-form>
-== Here i need to input mor details because the stack don't let me save the question

Vuetify uses a 12 column layout. The way I usually accomplish what you are looking to do is by using the v-flex. To place two components side by side we need to break the 12 columns into equal parts (6 and 6).
From the Vuetify Docs with text fields added:
<v-container grid-list-md text-xs-center>
<v-layout row wrap>
<v-flex xs6>
<v-text-field
v-model="field1"
label="Field 1"
></v-text-field>
</v-flex>
<v-flex xs6>
<v-text-field
v-model="field2"
label="Field 2"
></v-text-field>
</v-flex>
</v-layout>
</v-container>
Then you can play with the padding and margins classes to get them looking the way you wish.

Related

How to set a value in an autocomplete select vuetify

I have this v-data-table, witch one shows the result from a request to api, also it allows me to edit them, in the text-field it sets the information correctely, but the problem is it doesn't set the information in the autocomplete select:
<v-data-table
:headers="cabeceras"
:items="tablaRepuestos"
sort-by="Repuesto"
class="elevation-1"
no-results-text="No se encontraron resultados"
no-data-text="No ha cargado Ningun Dato"
>
<template v-slot:[`item.itg_descripcion`]="props">
<v-autocomplete
v-model="props.item.itg_descripcion"
:items="fillModRepuestos.listaRepuestos"
item-value="itg_id"
item-text="itg_descripcion"
label="Repuestos"
height="20"
return-object
#change="cambioRepuesto(props.item.itg_descripcion)"
no-data-text="No hay coincidencias"
clearable
></v-autocomplete>
</template>
<template v-slot:[`item.cantidad`]="props">
<v-text-field
v-model="props.item.cantidad"
label="Cantidad"
clearable
type="number"
></v-text-field>
</template>
<template v-slot:[`item.actions`]="{ item }">
<v-tooltip bottom mg="1">
<template v-slot:activator="{ on, attrs }">
<v-btn
v-bind="attrs"
v-on="on"
color="red"
small
fab
dark
#click="eliminarRepuesto(item)"
class="ml-2"
>
<v-icon>mdi-delete</v-icon>
</v-btn>
</template>
<span>Eliminar Repuesto</span>
</v-tooltip>
</template>
</v-data-table>
this shows the v-data-table right now:
but it should shows this:
the autocomplete select load the list correctly but the problem, as I said, is they don't load the information from the field itg_descripcion, how can I resolve this problem?
You have configured your v-autocomplete to use itg_id as it's item-value, this means you need to pass the itg_id to it's v-model in order to work properly. But in your code you are passing props.item.itg_descripcion.
If you have the itg_id in your props.item object, you just need to use that instead.
<v-autocomplete
v-model="props.item.itg_id"
:items="fillModRepuestos.listaRepuestos"
item-value="itg_id"
item-text="itg_descripcion"
label="Repuestos"
height="20"
return-object
#change="cambioRepuesto(props.item.itg_descripcion)"
no-data-text="No hay coincidencias"
clearable
></v-autocomplete>
If not, you can configure it to work with itg_descripcion only. But imo using id's it's safer.
<v-autocomplete
v-model="props.item.itg_descripcion"
:items="fillModRepuestos.listaRepuestos"
item-value="itg_descripcion"
item-text="itg_descripcion"
label="Repuestos"
height="20"
return-object
#change="cambioRepuesto(props.item.itg_descripcion)"
no-data-text="No hay coincidencias"
clearable
></v-autocomplete>

How to reset v-model after hiding input with conditional rendering

I have two inputs from which the first one is a switch and the second one is a text field which gets conditionally displayed if switch is set to true.
In situation when user sets the switch to true and then enters something in the text box the v model value for this input needs to be reset / removed when user sets the switch to false again.
I know I can achieve this manually or by using watcher. However just curious if I have missed something in the docs which will do this for me or may be a better method than what I think is the only way.
<v-row>
<v-col cols="12" sm="12">
<v-switch
v-model="data.budget_confirmed"
label="Budget Confirmed"
color="primary"
class="ma-0 pt-0"
hide-details
/>
</v-col>
<v-col v-if="data.budget_confirmed === true" cols="12" sm="12">
<validation-provider v-slot="{ errors }" name="Amount" rules="required">
<v-text-field
v-model="data.amount"
name="amount"
label="Amount"
:error-messages="errors"
:hide-details="!errors.length"
outlined
dense
/>
</validation-provider>
</v-col
</v-row>
Listen for the change event on the switch:
<v-switch
v-model="data.budget_confirmed"
label="Budget Confirmed"
color="primary"
class="ma-0 pt-0"
hide-details
#change="onSwitchToggle"
/>
Then in the onSwitchToggle method, reset amount when the switch if off:
onSwitchToggle () {
if (!this.budget_confirmed) {
this.amount = 0;
}
}

v-slot:badge and v-if does not work with a computed property

I'm working on a CMS project and I have an issue I can't figure out.
I Have a component where I'm showing IP's. On change I want a badge to appear, so the user knows "this field is changed".
But the thing is the badge won't show if I'm using "v-slot:badge".
In the v-if is a computed property, If I inspect the page with vue devtools ‘isStartIpValueChanged’ will be true on a change. So, it should work right?
Template
<v-list-item-content>
<v-form ref="form" v-model="valid">
<v-hover v-slot:default="{ hover }">
<v-row align-content="center" no-gutters>
<v-col>
<v-badge overlap color="red" right>
<template v-slot:badge v-if="isStartIpValueChanged">
<v-avatar color="red" size="6"></v-avatar>
</template>
<v-text-field
dense
:rules="apiIpRules"
v-model="apiIp.startIp"
#input="valueChanged()"
ref="startIp"
:class="hover ? 'hover-text-color' : ''"
placeholder="###.###.###.###">
</v-text-field>
</v-badge>
</v-col>
<v-col cols="1" class="text-center" align-self="center">
<p>-</p>
</v-col>
<v-col cols="1" class="text-center" align-self="center">
<v-btn v-show="hover" #click="deleteIp()" icon small color="red"><v-icon>mdi-minus-circle</v-icon></v-btn>
</v-col>
</v-row>
</v-hover>
</v-form>
Created and Computed (apiIp is a prop I get from the parent component)
created () {
this.apiIpsOriginalValueStartIp = this.apiIp.startIp
this.apiIpsOriginalValueEndIp = this.apiIp.endIp
this.apiIp.uuid = this.GenerateUUID()
},
computed: {
isStartIpValueChanged () {
return this.apiIp &&
(this.apiIp.startIp !== this.apiIpsOriginalValueStartIp ||
this.apiIp.uuid === null)
},
isEndIpValueChanged () {
return this.apiIp &&
(this.apiIp.endIp !== this.apiIpsOriginalValueEndIp ||
this.apiIp.uuid === null)
}
},
Anyone know what is going wrong here?
As according to Vuetify's own documentation, you should be using the v-model, directly on the v-badge, to show it only when you want it to.
<v-badge overlap color="red" right v-model="isStartIpValueChanged">
<template v-slot:badge>
<v-avatar color="red" size="6"></v-avatar>
</template>
<v-text-field
dense
:rules="apiIpRules"
v-model="apiIp.startIp"
#input="valueChanged()"
ref="startIp"
:class="hover ? 'hover-text-color' : ''"
placeholder="###.###.###.###">
</v-text-field>
</v-badge>
Doc: https://vuetifyjs.com/en/components/badges#show-on-hover

Vue.js/Vuetify: How can I make the v-card-actions reactive?

I have 4 cards (3 in the first row, 1 in second). Every time I resize my browser window my v-card-actions contents do not react. In pictures, this is when everything is ok:
And this is when I resize my browser window:
And finally here's my code:
.vue
<v-container
grid-list-lg
>
<v-layout
row
wrap
>
<v-flex
v-for="teacher in teachers"
:key="teacher.firstName"
md-4
xs4
>
<v-card
flat
tile
>
<v-img
:src='teacher.src'"
height="260px"
></v-img>
<v-card-title
primary-title
class='blue--text'
>
Dr. {{teacher.firstName}} {{teacher.lastName}}, {{teacher.specialty}}
</v-card-title>
<v-card-text class='body-1'>
M.S at {{teacher.ms}} <br>
M.S.C at {{teacher.msc}}
</v-card-text>
<v-card-actions>
<v-btn
flat
small
color='indigo darken-4'
>
More
</v-btn>
<v-spacer></v-spacer>
<v-btn
flat
small
color='indigo darken-4'
>
Schedule an Appointment
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
<script>
data() {
return {
teachers:[
{firstName:'Jon', lastName:'Doe', specialty:'PE', ms:' University of Georgia',
msc:'University of Georgia', src:'https://source.unsplash.com/kmuch3JGPUM'},
{firstName:'Maria', lastName:'Doe', specialty:'Philology', ms:'University of Atlanta',
msc:'University of Atlanta ', src:'https://randomuser.me/api/portraits/women/3.jpg'},
{firstName:'Jon', lastName:'Jon', specialty:'Mathematics', ms:'University of Michigan',
msc:'University of Michigan', src:'https://source.unsplash.com/Jy4ELSGPHTc'},
{firstName:'Peter', lastName:'Xavier', specialty:'Mathematics',
ms:'University of Miami', msc:'University of Miami',
src:'https://randomuser.me/api/portraits/men/71.jpg'},
{firstName:'Peter', lastName:'Miros', specialty:'Mathematics', ms:'University of Miami',
msc:'Georgetown University', src:'https://randomuser.me/api/portraits/men/20.jpg'},
}
]
}
The <v-card-actions> element does react to browser width changes.
What you are seeing is an issue with the Vuetify <v-button> element as it does not (by default) wrap text to fit.
You have a few options:
Add custom CSS for your buttons to accommodate - tricky and a bit too much hacking for my liking.
Make your own button element just for this - seems overkill, but I've done this when I also want a button to stand out or look different enough to Vuetify's standard.
Modify your button text to be shorter - Try one word like "Booking" or "Appointments", and even modify the text (or change to an icon) depending on screen size if you want to get fancy.
Personally, I'd recommend option 3.
EDIT: Added xs12 sm6 md4 sizing and some minor formatting changes to highlight different elements
<v-container grid-list-lg>
<v-layout row wrap>
<v-flex v-for="teacher in teachers" :key="teacher.firstName" xs12 sm6 md4>
<v-card>
<v-img :src="teacher.src" height="260px "></v-img>
<v-card-title primary-title class='blue--text'>
Dr. {{teacher.firstName}} {{teacher.lastName}}, {{teacher.specialty}}
</v-card-title>
<v-card-text class='body-1'>
M.S at {{teacher.ms}} <br> M.S.C at {{teacher.msc}}
</v-card-text>
<v-card-actions>
<v-btn outline color='blue'>
More...
</v-btn>
<v-spacer></v-spacer>
<v-btn outline color='green'>
Appointments
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
I have tested this and there is no size below 300px (minimum for v-card) where the buttons don't look fine.
Made a codepen for you too.

Unable to add template text to v-textarea with Vue and Vuetify

I have inherited an existing app written in Vue/Vuetify and it has an existing v-textarea element that I am trying to modify. The issue is that we now want to pre-populate this element with sample text that the user can edit to their needs. I have tried adding value and placeholder properties to the v-textarea element and not gotten the sample text to show in the v-textarea.
Here is the dialog that contains the troublesome v-textarea:
<v-dialog v-model="dialogAddComment"
hide-overlay
persistent
max-width="600px">
<v-toolbar card color="blue-grey lighten-4" dense elevation="16">
<v-toolbar-title color='black' class="body-2 ml-3">Add Comment</v-toolbar-title>
<v-spacer></v-spacer>
<v-icon #click.stop="closeDialogAddComment">close</v-icon>
</v-toolbar>
<v-form ref="form" v-model="valid" lazy-validation>
<v-card>
<v-flex>
<v-layout column>
<v-flex xs12 sm6 d-flex mx-3>
<v-select
:items="engagement.allIncidentTypes"
item-text="incidentCategoryText"
item-value="incidentCategoryKey"
label="Category"
:rules="[v => !!v || 'Category is required']"
required
v-model="incident.incidentCategoryKey"
></v-select>
</v-flex>
<v-flex xs12 sm6 d-flex mx-3>
<v-select
:items="zeroTo8"
label="Impact (Hours)"
:rules="[v => (v === 0 || v <9) || 'Impact is required']"
required
v-model="incident.numberOfHours"
></v-select>
</v-flex>
<v-flex xs12 sm6 d-flex mx-3>
<v-textarea
name="input-7-1"
label="Comment"
:rules="[v => !!v || 'Comment is required']"
required
v-model="incident.incidentFreeText"
counter=1024
maxLength=1024
rows=3
value='U Good lockers\nV Damaged lockers\nW Lockers replaced\nX (=U+V+W) Lockers installed\nY Lockers returned to warehouse'
></v-textarea>
<!-- -->
</v-flex>
</v-layout>
</v-flex>
<v-card-actions>
<v-spacer/>
<v-btn :disabled="!valid" color="primary" small #click="addIncident">Submit</v-btn>
<v-spacer/>
</v-card-actions>
</v-card>
</v-form>
</v-dialog>
I have tried setting the placeholder and value properties and seen nothing. I initially tried setting a text property but then found the documentation on the vuetify.js site. They even have a simple example that does exactly what I want to do. But my implementation is not working. and I am stumpped!
You should not set both v-model and value at the same time.
One possible solution is removing v-model and update incident.incidentFreeText in #input event
<v-textarea
name="input-7-1"
label="Comment"
:rules="[v => !!v || 'Comment is required']"
required
counter=1024
maxLength=1024
rows=3
value='U Good lockers\nV Damaged lockers\nW Lockers replaced\nX (=U+V+W) Lockers installed\nY Lockers returned to warehouse'
#input="onInput"
>
</v-textarea>
methods: {
onInput(value) {
this.incident.incidentFreeText = value
}
}
Another possible solution is keeping v-model, remove value, but you need to set
this.incident.incidentFreeText='U Good lockers\nV Damaged lockers\nW Lockers replaced\nX (=U+V+W) Lockers installed\nY Lockers returned to warehouse'
somewhere in your code.