I have the following v-item-group where a user can select a pre-defined amount or type himself a custom amount.
Here's the design of the v-item-group. However, I can't figure out how to get the value from Custom Amount. The property this.item is undefined. I thought I need to create another v-model but perhaps there is a simple and straignt-forward solution.
<v-item-group v-model="item">
<v-container>
<v-row>
<v-item v-for="n in amounts" :key="n" v-slot="{ active, toggle }">
<v-card
:color="active ? 'deep-purple accent-3' : 'grey'"
class="d-flex align-center rounded-circle mr-3"
dark
height="64"
width="64"
#click="toggle"
>
<v-scroll-y-transition>
<div v-if="active" class="h3 flex-grow-1 text-center">
{{ n }}
</div>
<div v-else class=" h5 flex-grow-1 text-center">
{{ n }}
</div>
</v-scroll-y-transition>
</v-card>
</v-item>
<v-item v-slot="{ toggle }" key="5">
<v-text-field
label="Custom Amount"
hide-details="auto"
#click="toggle"
></v-text-field>
</v-item>
</v-row>
</v-container>
</v-item-group>
Declare a local data property, and use v-model on v-text-field:
<v-text-field v-model="customAmount">
export default {
data() {
return {
customAmount: '2000'
}
}
}
The function that processes the user's selection could then get the custom value simply by this.customAmount.
demo
Related
ModalsComponent is being global to all my cards
This how I am calling CardComponent:
<CardComponent
v-for="card of cards"
:key="card.urlsId"
:cardImages="card.images"
:cardTitle="card.title"
:cardDescription="card.description"
:mediaRef="card.urlsId"
:dbRef="card.dbId"
:deleteBtn="true"
:imagesWithSlider="true"
:deleteModalOpen="deleteModalOpen"
#onOpenDeleteModal="
;(deleteModalOpen = true), (newCardModalOpen = false)
"
#onCloseDeleteModal="deleteModalOpen = false"
/>
And this is how my CardComponent looks like:
<template>
<div class="cards">
<ModalsComponent
v-if="deleteModalOpen"
:deleteModal="true"
#closeModal="$emit('onCloseDeleteModal')"
#onDeleteCard="log"
/>
<v-card class="card-container">
<div class="delete-btn">
<v-btn
v-if="deleteBtn"
class="mx-2"
fab
dark
small
#click="
$emit('onOpenDeleteModal'), (deletingCardRefs = { dbRef, mediaRef })
"
>
<v-icon dark> mdi-delete </v-icon>
</v-btn>
</div>
<ImageSlider
v-if="imagesWithSlider"
:imagesArray="cardImages"
:arrowBtns="false"
/>
<v-img v-else></v-img>
<div class="text-container">
<h3 class="card-title">{{ cardTitle }}</h3>
<p class="card-description">{{ cardDescription }}</p>
</div>
</v-card>
</div>
</template>
in CardComponent it is being looped after v-card element and my ModalsComponent being global to all my cards how to target it each of my cards separately?
Hi just got a question if this kind of thing is possible?
enter image description here
this is so far I have done.
<template>
<v-row align="center">
<v-checkbox
v-model="landscape"
label="Landscape"
></v-checkbox>
<v-date-picker
v-model="picker"
landscape
></v-date-picker>
</v-row>
</template>
I solved it using v-card. It was challenging one and been looking for the answer all over, I was like crashing my head on it. The output would be like this:
enter image description here
The complete code:
<template v-if="filters">
<div class="d-flex justify-lg-space-between filter__activities">
<v-text-field
v-model="searchInText"
outlined
dense
append-icon="fas fa-search"
placeholder="Search"
/>
<div class="px-2" />
<v-select
v-model="searchInSelect"
append-icon="fas fa-chevron-down"
item-color="lucky-point"
placeholder="Category"
outlined
dense
:items="types"
:menu-props="{ bottom: true, offsetY: true }"
class="lucky-point--text"
/>
</div>
<div class="filter__activities">
<v-menu
ref="menu1"
v-model="menu1"
:close-on-content-click="false"
transition="scale-transition"
offset-y
bottom
min-width="auto"
>
<template v-slot:activator="{ on }">
<v-text-field
:value="computedDateFormatted"
outlined
dense
placeholder="Select Date"
append-icon="mdi-calendar"
v-on="on"
/>
</template>
<v-card>
<div class="d-flex">
<div class="pa-2 py-16">
<div class="py-1">
<v-btn
plain
class="text-capitalize text-subtitle-1 mine-shaft--text filter__activities-active-btn"
>
Today
</v-btn>
</div>
<div class="py-1">
<v-btn
plain
class="text-capitalize text-subtitle-1 mine-shaft--text"
>
Last 7 days
</v-btn>
</div>
<div class="py-1">
<v-btn
plain
class="text-capitalize text-subtitle-1 mine-shaft--text"
>
Last 30 days
</v-btn>
</div>
<div class="py-1">
<v-btn
plain
class="text-capitalize text-subtitle-1 mine-shaft--text"
>
Last 90 days
</v-btn>
</div>
</div>
<span class="mx-2 mercury--bx-1"></span>
<div>
<v-date-picker
v-model="date"
#input="menu1 = false"
flat
no-title
color="lucky-point"
width="392"
/>
</div>
</div>
</v-card>
</v-menu>
</div>
</template>
I have a custom navMenu component that I show twice on my page - once across the top, and once hidden in a v-navigation-drawer until the screen width gets small enough to show it:
<template>
<nav>
<v-app-bar app hide-on-scroll>
<template #extension v-if="$vuetify.breakpoint.smAndUp">
<v-container>
<v-row>
<v-spacer />
<navMenu :items="menuItems" />
<v-spacer />
</v-row>
</v-container>
</template>
<v-app-bar-nav-icon
#click="toggleDrawer()"
v-if="$vuetify.breakpoint.xs"
/>
<img id="logo"
alt="corporate logo"
src="#/assets/full_logo.svg"
width="200"
height="60"
/>
<v-spacer />
<h3 class="info--text headline">My Fancy Website</h3>
</v-app-bar>
<v-navigation-drawer app
v-model="drawer"
v-if="$vuetify.breakpoint.smAndDown">
<navMenu :items="menuItems" />
</v-navigation-drawer>
</nav>
</template>
NavMenu.vue
<template>
<v-col v-for="(item, index) in items" :key="index">
<div v-if="item.children">
<v-menu transition="slide-y-transition" bottom>
<template #activator="{ on }">
<v-btn text v-on="on">{{ item.label }}</v-btn>
</template>
<v-list>
<v-list-item
v-for="(child, j) in item.children"
:key="j"
router
:exact="child.exact"
:to="{ name: child.routeName }"
>
<v-list-item-title class="text-capitalize">
{{ child.label }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
<div v-else>
<v-btn text router :to="{ name: item.routeName }" :exact="item.exact">
{{ item.label }}
</v-btn>
</div>
</v-col>
</template>
...you may have noticed a fatal flaw in my component: you can't iterate on a root element! Simple enough, wrap it in a <div />, right? Wrong. Wrapping the contents of the template in a div really screws up the layout of the menu items - it renders them stacked vertically instead of horizontally - I think the CSS is looking for a direct child or something.
Is there some alternative element that I can use for the template to satisfy the "one root element" edict that doesn't render any output? Oh, and I tried using the <template /> element already - you can't use it as a root element.
You were so close to finding the answer...
Actually, you should put in a div container, but then just change the display property of the container so the items are still positioned horizontally:
NavMenu.vue
<template>
<div style="display: flex">
<v-col v-for="(item, index) in items" :key="index">
...
I updated your code below. Essentially, all you need to do is to move the entire <v-navigation-drawer> component into your NavMenu.vue file and add the additional drawer prop. Since the <v-navigation-drawer component doesn't actually do much on its own. The #input event listener is only so that you can have the parent component update the drawer value outside of the child component.
<template>
<nav>
<v-app-bar app hide-on-scroll>
<template #extension v-if="$vuetify.breakpoint.smAndUp">
<v-container>
<v-row>
<v-spacer />
<navMenu :items="menuItems" />
<v-spacer />
</v-row>
</v-container>
</template>
<v-app-bar-nav-icon
#click="toggleDrawer()"
v-if="$vuetify.breakpoint.xs"
/>
<img id="logo"
alt="corporate logo"
src="#/assets/full_logo.svg"
width="200"
height="60"
/>
<v-spacer />
<h3 class="info--text headline">My Fancy Website</h3>
</v-app-bar>
<navMenu
v-if="$vuetify.breakpoint.smAndDown"
:drawer="drawer"
:items="menuItems"
#navInput="toggleDrawer()"
/>
</nav>
</template>
NavMenu.vue
<template>
<v-navigation-drawer app :value="drawer" #input="$emit('navInput')>
<v-col v-for="(item, index) in items" :key="index">
<div v-if="item.children">
<v-menu transition="slide-y-transition" bottom>
<template #activator="{ on }">
<v-btn text v-on="on">{{ item.label }}</v-btn>
</template>
<v-list>
<v-list-item
v-for="(child, j) in item.children"
:key="j"
router
:exact="child.exact"
:to="{ name: child.routeName }"
>
<v-list-item-title class="text-capitalize">
{{ child.label }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
<div v-else>
<v-btn text router :to="{ name: item.routeName }" :exact="item.exact">
{{ item.label }}
</v-btn>
</div>
</v-col>
</v-navigation-drawer>
</template>
<script>
export default {
props: {
drawer: Boolean,
items: {
type: Array,
default: () => []
}
}
};
</script>
Trying to use Vuetify's Data-Table to search/filter based on the computed value of a field. As feel free to jump into the codepen and type in some values for yourself. For example, I have it setup in such a way that the email address field can be searched by; however, the name of the employee and phone record fields are not functional.
Codepen
https://codepen.io/Jasilo/pen/PooLjbE
VUE:
<div id="app">
<v-app id="inspire">
<v-card>
<header>How can I search by the computed Name and Phone fields?</header>
<v-card-title>
<header>Employee List</header>
<v-spacer></v-spacer>
<v-text-field v-model="search" append-icon="search" label="Search" single-line hide-details></v-text-field>
</v-card-title>
<v-data-table v-bind:headers="headers" v-bind:items="employeesArray" v-bind:search="search">
<template v-slot:item.email="{ item }">
<div>
{{ item["email"] }} </div>
</template>
<template v-slot:item.name="{ item }">
<div>
{{ getName(item) }}
</div>
</template>
<template v-slot:item.phone="{ item }">
<div> {{ getPhone(item) }}</div>
</template>
<template v-slot:no-data>
<div icon="warning">
{{ gridEmpty }}
</div>
</template>
</v-data-table>
</v-card>
</v-app>
</div>
HTML:
<div id="app">
<v-app id="inspire">
<v-card>
<header>How can I search by the computed Name and Phone fields?</header>
<v-card-title>
<header>Employee List</header>
<v-spacer></v-spacer>
<v-text-field v-model="search" append-icon="search" label="Search" single-line hide-details></v-text-field>
</v-card-title>
<v-data-table v-bind:headers="headers" v-bind:items="employeesArray" v-bind:search="search">
<template v-slot:item.email="{ item }">
<div>
{{ item["email"] }} </div>
</template>
<template v-slot:item.name="{ item }">
<div>
{{ getName(item) }}
</div>
</template>
<template v-slot:item.phone="{ item }">
<div> {{ getPhone(item) }}</div>
</template>
<template v-slot:no-data>
<div icon="warning">
{{ gridEmpty }}
</div>
</template>
</v-data-table>
</v-card>
</v-app>
</div>
Simplest way is to use a computed property:
computed: {
employeeTableData() {
return this.employeesArray.map(e => {
return {
email: e.email,
name: this.getName(e),
phone: this.getPhone(e),
};
});
},
},
Then change v-data-table to use employeeTableData instead and directly reference the attributes.
Working codepen
You can then search XD or 666- and it will correctly filter on name and phone number.
its me again!
so i have a own component:
<template>
<div class='mynewcomponent'>
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-card v-bind:style="{ backgroundColor: this.myColor}">
<!-- Picture
<v-img
src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
height="200px"
>
</v-img>
-->
<v-card-title primary-title>
<div>
<slot name="header">Top western road trips</slot>
<br>
<slot name="TestDesciption">1,000 miles of wonder</slot>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat>Share</v-btn>
<v-btn flat color="purple">Explore</v-btn>
<v-spacer></v-spacer>
<v-btn icon #click="show = !show">
<v-icon>{{ show ? 'keyboard_arrow_down' : 'keyboard_arrow_up' }}</v-icon>
</v-btn>
</v-card-actions>
<v-slide-y-transition>
<v-card-text v-show="show">
I'm a thing. But, like most politicians, he promised more than he could deliver. You won't have time for sleeping, soldier, not with all the bed making you'll be doing. Then we'll go with that data file! Hey, you add a one and two zeros to that or we walk! You're going to do his laundry? I've got to find a way to escape.
</v-card-text>
</v-slide-y-transition>
</v-card>
</v-flex>
</v-layout>
</div>
</template>
<script>
export default {
data: () => ({
show: false,
myColor:'#ffffff'
})
}
</script>
and in my about.vue i load it in a for loop:
<template>
<div class='about'>
<mynewcomponent v-for="(item,index) in 100"/>>
<template v-slot:header>
<h3 style="text-align: left;"><span style="color: #3366ff">ID: 1234</span></h3>
</template>
<template v-slot:TestDesciption>
<h3 style="text-align: left">example shit</h3>
</template>
</mynewcomponent>
</div>
</template>
<script>
import myNewComponent from '#/components/myNewComponent.vue'; // # is an alias to /src
export default {
name: 'about',
components: {
'mynewcomponent': myNewComponent
}
}
</script>
now i want the even and odd Cards in other background color.
i tried everything what google says but whitout success.
i will pass the color if index % 2 == 0 (even or odd)
how can i pass the color in the for loop ?
or can someone tell me a better way to do this?
Thank you
You can create a method to bind the class attribute and pass the index as a parameter. For each line, you can evaluate and return a different class to this element.
You can check am example here
methods:{
spanClass: function(index) {
return {
in: index % 2 === 0,
out: index % 2 !== 0
}
}
li.in {
background-color:red;
}
li.out {
background-color:black;
}
<template>
<div class='about'>
<mynewcomponent v-for="(item,index) in 100"/>>
<template v-slot:header>
<h3 style="text-align: left;"><span :class="spanClass(item)">ID: 1234</span></h3>
</template>
<template v-slot:TestDesciption>
<h3 style="text-align: left">example shit</h3>
</template>
</mynewcomponent>
</div>
</template>