I am trying to achieve the above result. I have already have the table working in my vue project.
This piece of code is the template for the datatable from Vuetify.
<v-card>
<v-card-title>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:headers="headers"
:items="tableData"
:search="search"
></v-data-table>
</v-card>
Populating the table with basic data is just fine and I've already done that, but I need add that "Send again" link/button, and hook it up with a method. Or any other customization for that matter, like the yellow bullet point. Is this going to be super hard to do ?
To do this, we can use item or item.<name> Slots, you can read more about it in data table API https://vuetifyjs.com/en/api/v-data-table/#slots
your code can be something like this:
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:item.status="{ item }">
<template v-if="item.status == `registered`">
{{ item.status }}
</template>
<template v-else>
{{ item.status }} - <v-btn #click="AddSendBtnMethod(item.id)"> send again<v-btn>
</template>
</template>
</v-data-table>
Here is a sample from Vuetify, changed to show how its works
Related
I have a modal with a small form (Select and list with multiple select). I can save my values. But after saving I want to close the modal and while closing clear every form field in this case my list selection and selectbox values, right now they are still the first value I selected before closing. Could someone give me a pointer on how to do it?
I thought of putting everything inside a form tag and maybe trying to achieve it from their, but do not know if it is a correct way. these are the selections I want to clear. The binded arrays I can already clear out. But not the select in the list
html:
<v-row>
<v-col cols="4" >
<v-select
:items="availableTimes"
item-text="date"
#select="filterByDate"
v-model="selectedDate"
></v-select>
</v-col>
<v-col cols="8">
<v-chip-group
v-model="selection"
active-class="deep-purple--text text--accent-4">
<v-chip
v-for="(time, i) in dateTimeArray"
:key="time.id"
:value="time"
v-on:click="getTimeValue(times)"
#click="getTimesFiltered(time)">
{{ time.startTime +" - "+ time.endTime }}
</v-chip>
</v-chip-group>
</v-col>
</v-row>
<v-row>
<v-col cols="4">
<v-card>
<v-list>
<v-list-item-group
v-model="model"
multiple
color="blue"
>
<v-list-item
v-for="(item, i) in voterArrayFilteredByTime"
:key="item.id"
:value="item">
<v-list-item-content>
<v-list-item-title v-text="item.voterUniqueName"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
It would be helpful if you show your script tags.
Without seeing what you are trying to do, my suggestion would be to use reset your "selection" variable in your methods. For example if you have a close button
<v-btn #click="resetStuff" >Close me<v-btn>
Then in your method:
methods: {
// your method
resetStuff() {
this.selection = null
//.. some more variables to reset
}
I have a Vuetify which searches a list of users. If there are no results I want to show a second button that allows you to create a new user:
<v-autocomplete
v-model="event.user"
:items="usersData"
label="Seach speaker list"
:search-input.sync="searchUser"
return-object
item-value="id"
item-text="name"
>
</v-autocomplete>
This is the button to show. How to I conditionally allow this if there are no results?
<v-row>
<v-col cols="8">
<v-row>
<v-subheader>
Can’t find who you’re looking for?
</v-subheader>
</v-row>
<v-btn>
<v-icon>
mdi-plus
</v-icon>
Add new speaker
</v-btn>
</v-col>
</v-row>
Try adding v-if directive in v-row. I assume that usersData is an array:
<v-row v-if="usersData.length == 0">
<v-col cols="8">
<v-row>
<v-subheader>
Can’t find who you’re looking for?
</v-subheader>
</v-row>
<v-btn>
<v-icon>
mdi-plus
</v-icon>
Add new speaker
</v-btn>
</v-col>
</v-row>
I create multiple popover menus with v-menu; one for each row in my table. I need a way for the menu to close when I click submit. I cannot use v-model="menu" and make menu false or true to hide or show the menu because then every menu will open when I set it to true! Does anyone know another way to make the menu close, without using v-model? I have found a way to open it using the activator slot. Perhaps there is an activator slot that will close the component, as well?
<template v-slot:item.hours="{ item }">
<v-menu
:nudge-width="200"
:close-on-content-click="false"
offset-x
>
<template v-slot:activator="{ on }">
<v-chip
color="blue"
dark
v-on="on"
>
{{ parseFloat(item.hours).toFixed(1) }}
</v-chip>
</template>
<v-form #submit.prevent="handleSubmitMenu(item)">
<v-card class="px-5">
<v-text-field
label="Edit Hours"
:value="item.hours"
#input="updateHours"
></v-text-field>
<v-card-actions>
<SubmitButton />
</v-card-actions>
</v-card>
</v-form>
</v-menu>
</template>
handleSubmitMenu(timeEntry) {
const hours = this.hours
this.menu = false
},
Just add v-model for each row.
<v-menu v-model="item.menu">
EDIT you also can use $refs just add it to v-menu and call save() to close it.
<v-menu ref="menu" top offset-y :close-on-content-click="false">
<template v-slot:activator="{ on }">
<v-btn
color="primary"
dark
v-on="on"
>
Activator
</v-btn>
</template>
<v-btn #click="$refs.menu.save()"></v-btn>
</v-menu>
I am attempting to set up a responsive Vuetify app bar in a Vue.js project. The navigation links are rendered in a 3-dot drop down menu when viewed on a mobile screen.
<v-app>
<v-app-bar color="indigo" dark fixed app>
<v-toolbar-title>Toolbar Mobile Menu</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn text to="create">
<span class="mr-2" v-if="activeUser">Create Post</span>
</v-btn>
<v-btn text to="/">
<span class="mr-2" v-if="activeUser">All Posts</span>
</v-btn>
</v-toolbar-items>
<v-menu class="hidden-md-and-up">
<template v-slot:activator="{ on }">
<v-btn icon v-on="on">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item v-if="activeUser" to="create">
<v-list-item-title>Create Post</v-list-item-title>
</v-list-item>
<v-list-item v-if="activeUser" to="/">
<v-list-item-title>All Posts</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
<v-content>
<router-view></router-view>
</v-content>
</v-app>
The problem is that the 3-dot button renders in both full screen and mobile. I of course want that button to by visible only in mobile. To fix this, I attempted to nest the button inside the v-toolbar-items tags, but that also did not work. Any recommendations on how to configure this app bar to display the 3-dots button only in mobile view? Thanks!
I usually make myself a little helper function
computed: {
isMobile() {
return this.$vuetify.breakpoint.xsOnly;
}
}
The different available breakpoints are listed here.
Then you can use it in your template like
<v-menu v-if="isMobile">
</v-menu>
Alternatively, you can just use the $vuetify directly in your markup.
<v-menu v-if="$vuetify.breakpoint.xsOnly">
</v-menu>
Using vuetify, how can I make two UI components show up on one singular page? I have tried combining elements within one bracket and got error messages. When stacking components in separate only thee bottom template appears in the front end. Is there a way two stack UI components using vue-router?
edit: my goal is to place two ui components such as photo grid and carousel from vuetify on top each other to create a print out similar to this screenshot mash-up.
This is the code that produces my current localhost printout code sample of stacking templates and the localhost printout.
<template>
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-container grid-list-sm fluid>
<v-layout row wrap>
<v-flex
v-for="n in 9"
:key="n"
xs4
d-flex
>
<v-card flat tile class="d-flex">
<v-img
:src="`https://picsum.photos/500/300?image=${n * 5 + 10}`"
:lazy-src="`https://picsum.photos/10/6?image=${n * 5 + 10}`"
aspect-ratio="1"
class="grey lighten-2"
>
<v-layout
slot="placeholder"
fill-height
align-center
justify-center
ma-0
>
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
</v-layout>
</v-img>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-flex>
</v-layout>
<v-carousel>
<v-carousel-item
v-for="(item,i) in items"
:key="i"
:src="item.src"
></v-carousel-item>
</v-carousel>
</template>
Your problem is you have two template tags, if you move the content of the bottom template tag into the first one it should work. It should look something like this:
<template>
<div>
<v-layout>
v-card etc...
</v-layout>
<v-carousel>
v-carousel-item etc...
</v-carousel>
</div>
</template>
<script>
javscript code...
</script>
As #sumurai8 said, you should only have one top level template tag.