I am trying to understand what I'm doing wrong in here.
<div class="pageContent container-fluid" **v-show="isHidden"**>
<div class="innerPageContent container-fluid">
<div>
<h2>About</h2>
</div>
<div class="container">
<v-row dense>
<v-col v-for="card in cards" :key="card.title" :cols="card.flex">
<v-card dark outlined>
<v-img :src="card.src" class="white--text align-end" height="200px">
<v-card-title v-text="card.title"></v-card-title>
</v-img>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text color="orange" :to="card.route" **#click="isHidden = !isHidden"**>EXPLORE</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</div>
</div>
</div>
data () {
return {
cards: [
{ title: 'Test', src: '', flex: 6, route: '/about/test' },
{ title: 'Test2', src: '', flex: 6, route: '/about/test2' },
],
**isHidden: true,**
}
},
The "About" div is hidden and, upon clicking on "Explore" button, I see "test2" (my second route), but when I go back, the "About" div is no longer displayed.
Is there something I'm missing ?
Related
I have this snippet:
<div id="app">
<v-app id="inspire">
<v-row justify="center" align="center">
<v-col v-for="col in colors" :key="col" class="shrink" style="min-width: 220px;">
<v-text-field v-model="col" hide-details class="ma-0 pa-0" solo>
<template v-slot:append>
<v-menu v-model="menu" top nudge-bottom="105" nudge-left="16" :close-on-content-click="false">
<template v-slot:activator="{ on }">
<div :style="swatchStyle" v-on="on" />
</template>
<v-card>
<v-card-text class="pa-0">
<v-color-picker v-model="col" flat />
</v-card-text>
</v-card>
</v-menu>
</template>
</v-text-field>
</v-col>
</v-row>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
color: '#1976D2',
colors: [
"#1aaa31",
"#1ccc31",
],
menu: false,
}),
computed: {
swatchStyle() {
const { color, menu } = this
return {
backgroundColor: color,
cursor: 'pointer',
height: '30px',
width: '30px',
borderRadius: menu ? '50%' : '4px',
transition: 'border-radius 200ms ease-in-out'
}
}
}
})
Here is a pen
Each of them (color-pickers) closing right after selecting, I want to prevent this, it's working fine with a single component.
I've already set :close-on-content-click to false, but don't really understand why they opening at once and closing right after click without v-for it works fine.
I am creating a simple table with vuetify and it turns out that when adding the v-radio-group component, the elements in the row are not adjusted to the height, so this causes the table to look ugly.
what property could i use to make the cols all fit to the same height.
I have looked in several places, even in the documentation and I do not see anything like it.
component:
<template>
<v-container>
<v-row class="text-center" no-gutters>
<v-col v-for="(item, index) in headers" v-bind:key="index">
<v-card v-if="item" :key="index" class="pa-2" outlined tile>
{{ item.nombre }}
</v-card>
</v-col>
</v-row>
<div v-for="(item, index) in items" v-bind:key="index">
<v-row no-gutters class="text-center"
align="center"
>
<v-col
align-self="center"
>
<v-card class="pa-2" outlined tile>
{{ item.nombre }}
</v-card>
</v-col>
<v-col>
<v-card class="pa-2" outlined tile>
{{ item.cantidad }}
</v-card>
</v-col>
<v-col offset-md="12">
<v-card outlined tile>
<v-radio-group v-model="radioGroup">
<v-radio
v-for="n in 2"
:key="n"
:label="`Radio ${n}`"
:value="n"
></v-radio>
</v-radio-group>
</v-card>
</v-col>
</v-row>
</div>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
optRadio: [
{ nombre: "Bueno", value: 1},
{ nombre: "Malo", value: 2},
],
headers: [
{ nombre: "Descripcion", value: "descripcion" },
{ nombre: "Cantidad", value: "cantidad" },
{ nombre: "estado", value: "state" },
],
items: [
{ nombre: "RADIO", cantidad: 1, state: 1 },
{ nombre: "FRONTAL", cantidad: 10, state: 0 },
{ nombre: "PARLANTES", cantidad: 100, state: 2 },
{ nombre: "ENCENDEDOR", cantidad: 100, state: 2 },
{ nombre: "CENICERO", cantidad: 100, state: 2 },
{ nombre: "TAPETES", cantidad: 100, state: 2 },
],
};
},
};
</script>
Your key here is applying correct flex attributes to your grid system.
First you'd have to instruct your colums to place content vertically, not horizontally: <v-col class="d-flex flex-column"
Then, instruct the cards within to grow in the available vertical height: <v-card class="pa-2 flex-grow-1 d-flex" outlined tile>. To get the content centered within the card, add these two flex helpers to the card as well: align-center justify-center
Documentation HERE
Codepen solution HERE
I am a vuejs newbie and i am having difficulties trying to make my objects return back in a row they are in a column.
components/sellingItems.vue
<template>
<v-container class="my-5">
<v-row>
<v-col
sm="6"
md="4"
>
<v-card outlined>
<v-img :src="image" height="200px" />
<v-card-title> {{ name}} </v-card-title>
<v-card-subtitle> ${{ price }}</v-card-subtitle>
<v-card-actions>
<v-btn #click="addToCart" color="success" outlined >
<v-icon small left> add </v-icon>
Add to Cart
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
props: ['id', 'image', 'name', 'price'],
}
</script>
pages/index.vue
After adding the for loop my products list turns into a column, i prefer it in a row to suit my aim
The Index Page
Stack overflow wont let me post the index page code so heres a screenshot
Check this
use a row and columns by editing your class to determine how many items per row I have added code in codepen
https://codepen.io/Juan-Carlos-MA/pen/yLMdLRX?editors=1010
<div id="app">
<v-app id="inspire">
<br>
<br>
<v-slider
v-model="fruits"
:tick-labels="ticksLabels"
:max="3"
step="1"
ticks="always"
tick-size="4"
></v-slider>
<div class="row">
<div v-for="item in items" :class="selection">
<v-card :loading="loading" class="mx-auto my-12" max-width="374">
<template slot="progress">
<v-progress-linear color="deep-purple" height="10" indeterminate></v-progress-linear>
</template>
<v-img height="250" src="https://cdn.vuetifyjs.com/images/cards/cooking.png"></v-img>
<v-card-title>{{ item.mensaje }}</v-card-title>
<v-divider class="mx-4"></v-divider>
<v-card-title>{{ item.precio }}</v-card-title>
<v-card-actions>
<v-btn color="deep-purple lighten-2" text #click="reserve">
Add TO CART
</v-btn>
</v-card-actions>
</v-card>
</div>
</div>
</v-app>
</div>
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: () => ({
loading: false,
selection: "col-6",
value: 0,
fruits: 1,
ticksLabels: ["one", "two", "tree", "four"],
items: [
{ mensaje: "Tamales", precio: "$300" },
{ mensaje: "Atole", precio: "$300" },
{ mensaje: "Taquito", precio: "$300" },
{ mensaje: "Taquito", precio: "$300" }
]
}),
methods: {
reserve() {
this.loading = true;
setTimeout(() => (this.loading = false), 2000);
}
},
watch: {
fruits: function (val) {
console.log(val);
if (val == 0) {
this.selection = "col-12";
} else {
if (val == 1) {
this.selection = "col-6";
} else {
if (val == 2) {
this.selection = "col-4";
} else {
if (val == 3) {
this.selection = "col-3";
}
}
}
}
}
}
});
Thew problem seems to be that you are creating a new row vor every item
<template>
<v-container class="my-5">
<v-row> <!-- <=== here is your row -->
<v-col sm="6" md="4">
... etc
</v-col>
</v-row>
</v-container>
</template>
you can either move the <v-row> into the parent component and wrap <SellingItems v-for...> or pass an array (products) into the component and have the v-for within that component
<SellingItems :items="products" ... >
<template>
<v-container class="my-5">
<v-row>
<v-col sm="6" md="4" v-for="item in items"> <!-- <=== move v-for here -->
... etc
</v-col>
</v-row>
</v-container>
</template>
i am new in Nuxt.js and Vuetifiy i want to add url link in image tag. if i press image it should open other page link
my page layout
i have specified urls each image have different url like i want to add this url to image
to="/AppMain/Support/Support"
and
to="/UserDash/Profile"
also
to="/AppMain/Entertainment"
how to add this urls in image
my code
<template>
<v-layout style="width: auto;" class="ma-auto">
<v-carousel cycle light height="309" hide-delimiter-background show-arrows-on-hover>
<v-carousel-item v-for="(slide, i) in slides" :key="i">
<v-row>
<v-col cols="3" v-for="(images, j) in slide.images" :key="j">
<div class="d-flex flex-column justify-center align-center">
<v-img :src="images.src" width="30"/>
<span class="mx-auto text-center caption">{{ images.caption }}</span>
</div>
</v-col>
</v-row>
</v-carousel-item>
</v-carousel>
</v-layout>
</template>
<script>
export default {
name: "playground",
data: () => ({
slides: [
{
images: [
{ src: "https://akam.cdn.jdmagicbox.com/images/icontent/newwap/newprotmore/hkm_allcategories.svg", caption: "All Categories"},
{ src: "https://akam.cdn.jdmagicbox.com/images/icontent/newwap/newprotmore/hkm_b2b.svg", caption: "B2B" },
{ src: "https://akam.cdn.jdmagicbox.com/images/icontent/newwap/newprotmore/hkm_shopping.svg", caption: "Shopping" }
]
},
Just wrap it:
Use <nuxt-link />:
<nuxt-link to="#">
<v-img :src="images.src" width="30"/>
</nuxt-link>
If you add the urls to the slide.images array, you can dynamically assign them:
<nuxt-link :to="images.url">
Currently in the products.vue, I have an array of productList containing 4 objects. I will loop through the array and pass each individual objects to the ProductsItem.vue component. In that component, I create the cards using vuetify.
I am unable to align the contents to the centre of the card.
Here is my code, a screenshot of my cards and the desired result
Products.vue
<template>
<div>
<h1>Products</h1>
<v-container class="my-5">
<v-layout row wrap>
<v-flex xs12 sm6 md4 v-for="productItem in productList"
:key="productItem.id">
<ProductItems :productItem="productItem"/>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
import ProductItems from "#/components/ProductItems";
export default {
data() {
return {
productList: [
{
id: 1,
name: "Superdry",
description: "Rookie Aviator Patched Bomber"
},
{
id: 2,
name: "SuperHot",
description: "Rookie Aviator Patched Bomber"
},
{
id: 3,
name: "Buron MensWear",
description: "Skinny Fit Oxford Shirt In White"
},
{
id: 4,
name: "Asos",
description: "slim shirt with stretch in blue"
}
]
};
},
components: {
ProductItems
}
}
</script>
ProductItem.vue
<template>
<v-card flat class="ma-3 text-xs-center">
<v-img src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect-
ratio="2.75"></v-img>
<v-card-title primary-title>
<div>
<h3 class="headline pink--text text--accent-2">
{{productItem.name}}</h3>
<div>{{productItem.description}}</div>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color="orange">Add to Cart</v-btn>
</v-card-actions>
</v-card>
</template>
<script>
export default {
props: ["productItem"],
data() {
return {};
}
};
</script>
<style>
</style>
Update : Works in both version of Vuetify 1.5 and 2:
To centralize v-card-text content just apply the class=text-center
v-card-title and v-card-actions are flex components so by adding class="justify-center" to both you can centralize the whole thing:
<v-card-title primary-title class="justify-center">
<div>
<h3 class="headline pink--text text--accent-2">Superdry</h3>
<div>Rookie Aviator Patched BomberproductItem.description</div>
</div>
</v-card-title>
<v-card-actions class="justify-center">
<v-btn flat color="orange">Add to Cart</v-btn>
</v-card-actions>
you can also use v-spacer to center components in both v-card-title and v-card-text of a v-card
<v-card-title>
<v-spacer />
<div class="text-center">
<h3 class="headline pink--text text--accent-2">Headline</h3>
<div>Some description about the headline</div>
</div>
<v-spacer />
</v-card-title>
<v-card-actions>
<v-spacer />
<v-btn color="orange">Some Button</v-btn>
<v-spacer />
</v-card-actions>