I was curious to know if there is any chance of formatting a v-text-field so that it not only allows hours and minutes to be chosen, but also days.
I’m currently looking at the Vuetify documentation for text-fields, which shows the following solution:
https://vuetifyjs.com/en/components/text-fields/#icon-events
<v-text-field
label="Label Text"
value="12:30:00"
type="time"
suffix="PST"
></v-text-field>
What I want to achieve is to be able to choose days:hours:minutes, instead of hours:minutes:seconds.
Is there any way to manipulate the text-field in this manner?
Thanks!
Vuetify doesn't provide one component that does both, but you could use one each of types date and time:
<v-text-field
v-model="vdate"
label="DATE"
type="date"
></v-text-field>
<v-text-field
v-model="vtime"
label="TIME"
type="time"
suffix="EST"
></v-text-field>
Here's a demo
Related
I am having issues with getting the vuetify grid-system to work properly. I have installed vuetify, added it as a plugin to my app and imported it into my file. When I use its <v-container> or <v-row>- tags, a grid shows up, so that should all be working. What is not working however, is the "linking" of columns to rows. I believe that I have the code set up correctly, as it is basically a copy of the tutorial-code on the vuetify website. When I run the file, the columns are children of the rows, as expected, but are shown below eachother, not next to eachother. I have two rows which I do expect to be shown below eachother, but I want the columns of each row to be shown horizontally to eachother, inside the row.
Here is how I want it to look like, it is a screenshot of an example from the vuetify docs:
What I end up with however, looks like this:
I will also provide my code here:
<template>
<v-container class="grey lighten-5">
<v-row
v-for="n in 2"
:key="n"
:class="n === 1 ? 'mb-6' : ''"
no-gutters>
<v-col
v-for="k in n + 1"
:key="k">
<v-card
class="pa-2"
outlined
tile>
{{ k }} of {{ n + 1 }}
</v-card>
</v-col>
</v-row>
</v-container>
</template>
I really hope someone can help me, as I am very stuck and feel like I have tried everything.
I appreciate every answer! :)
EDIT: I just saw that the console tells me that "[Vue warn]: Unknown custom element: <v-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.". That seems strage to me, as there are indeed rows and columns shown on the rendered site. Does anyone have an idea on how to tackle this issue?
I have the following code for working with timestamp datas getting from db and displaying in the interface. However type 'datetime-local' works in Firefox, but not in Chrome. How can I solve this problem?
<v-text-field
:type="'datetime-local'"
:id="index"
:data-name="name"
v-model="value"
#input="isSaveEditEnabled = true"
outlined
dense
/>
I would like to know if there is a way to do what I'm trying to describe below:
Let's suppose we have a component with a slot, and a fallback content has been defined.
When using this component elsewhere, I would like to have the following behavior:
<TheComponent>
<template v-slot:name="{ data }">
<fallback v-if="condition(data)"/>
</template>
</TheComponent>
I suppose the fallback tag (or similar) does not exists (at least, I didn't find it...). So I suppose I'm thinking the wrong way, but I can't find a solution to my problem.
The thing is that I can't alter the TheComponent as it is provided by an external library, and I don't want to re-create the content.
If it can help, in fact, I'm trying to hide the expand button to prevent to expand a row in a Vuetify data-table, depending on if the row has something to show or not in it's expanded part. So I would like to write something that behave like:
<v-data-table :items="items" show-expand ...>
<template v-slot:item.data-table-expand="{ item }">
<!-- Here I want the default behavior only if my item respects some condition -->
<fallback v-if="condition(item)"/>
<!-- Otherwise, I don't want to display the button that expands the row -->
</template>
</v-data-table>
Thank you in advance for your help.
After quite a lot of "googling" I don't think its possible. IMHO your best bet is to replicate the default slot content Vuetify generates and put it under your own condition (v-if="item.description" in my example):
<v-data-table :headers="headers" :items="people" show-expand>
<template v-slot:expanded-item="{ item, headers }">
<td :colspan="headers.length">{{ item.description }}</td>
</template>
<template v-slot:item.data-table-expand="{ item, isExpanded, expand }">
<v-icon
v-if="item.description"
:class="['v-data-table__expand-icon', { 'v-data-table__expand-icon--active': isExpanded }]"
#click.stop="expand(!isExpanded)"
>$expand</v-icon>
</template>
</v-data-table>
I understand this solution is brittle and can break anytime Vuetify change something but i don't think there is better solution now...
Example
When i try to sort by using either first or second columns, the rows are sorted except for the checkbox in the last column. Is the last column disjoint based on my code?
<el-table :data="items" stripe style="width: 50%">
<el-table-column prop="email" label="email" sortable></el-table-column>
<el-table-column prop="username" label="Username" sortable></el-table-column>
<el-table-column label="Enable">
<template slot-scope="scope">
<el-checkbox :checked="scope.row.isSelected" #change="toggleEnable(scope.row)" />
</template>
</el-table-column>
</el-table>
So basically the DOM isn't changed so Vue doesn't recognize the change. To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item. In case of element ui table you should fill the row-key attribute. Which is listed in table-atributes
Adding the row-key will solve your challenge
An alternative way to make it work is replacing the :checked by v-model. but still it's good to provide the row-key
I am currently using Vue Js with Vuetify and Vuelidate for an SPA.
I have a form to create a new Account, which is pretty standard.
What I have decided to do though is break the form into steps and utilise the v-stepper component from Vuetify.
The part I am stuck on is how the users choices as they fill in the form can dictate the steps. For example;
Using a v-if I determine if the v-text-field is needed to be shown, what I am unsure of is how this will effect the forms data/model that will eventually be sent in a POST.
Am I looking at this in the right way? or can someone suggest a better approach?
Code:
<template>
<v-form v-model="stepCount">
<-stepper-header>
<v-stepper-step step="1" :complete="stepStage > 1">
Account Details
</v-steper-step>
<v-divider></v-divider>
<v-stepper-step step="2" :complete="stepStage > 2">
Personal Details
</v-steper-step>
</v-stepper-header>
<v-stepper-content step="1">
<v-text-field>
Usual filler for a text field {Username}
</v-text-field>
<v-text-field>
Usual filler for a text field {Password}
</v-text-field>
<v-text-field>
Usual filler for a text field {Age}
</v-text-field>
<v-text-field>
label="Gender"
v-model="gender
:error-messages="genderErrors"
#intput="v.gender.$touch()"
#blur="v.gender.$touch()"
</v-text-field>
</v-stepper-content>
<v-stepper-content>
<v-text-field v-if="gender == 'F'">
label="Bra Size"
v-model="braSize
:error-messages="braSizeErrors"
#intput="v.gender.$touch()"
#blur="v.gender.$touch()"
</v-text-field v-else>
<v-text-field>
Usual filler for a text field {t-ShirtSize}
</v-text-field>
</v-stepper-content>
Thanks in advance.
It seems like your asking several things here so here is what I think the answer your looking for is.
To control the stepper flow you can either set the stepStage to variables like steppers shows or use a computed variable that returns the state based on the collected data.
Computed state
computed:{
stepStage(){
if(/*certain content is correctly filled and a next button has been clicked*/)return 1
if(/*check another computed variable that decides if the form is complete*/)return 2
//etc
}
}
As far as v-if statements in forms. It shouldn't affect a submitted form since it actually removes or inserts an element based on the value as stated in the first paragraph of this section. Note v-stepper doesn't use v-if.
For more control you may consider saving the data in the state of the component and then use javascript to do the actual submission. This allows you to have complete control over what is sent to the server.