I am using v-for to display collection of images using Vuetify v-img. We only store the image's Id which is then dynamically inserted into the src attribute of v-img. But dynamically inserting src value is not working. image.title is displayed but nothing is displayed for v-img. I have tried few other answers on SO but none worked. Does anybody know what is the correct way to do this?
<v-card max-width="400" v-for="image in images" :key="image.sourceId">
{{image.title}}
<v-img
src="'https://img.imagestore.com/image/' + image.sourceId + '.jpg'">
</v-img>
</v-card>
export default {
data: () => ({
images: [
{
id: "2",
sourceId: "bMwG1R3sXnE",
title: "Sunrise"
},
{
id: "3",
sourceId: "pqrwG1R3sXnE",
title: "Amazon Forest"
}
]
})
Well, binding the src attribute made it work so instead of src use :src
<v-img
:src="'https://img.imagestore.com/image/' + image.sourceId + '.jpg'">
</v-img>
or
<v-img
:src="`https://img.imagestore.com/image/${image.sourceId}.jpg`">
</v-img>
Related
I'm trying to have different text colors for my breadcrumbs based on a property but I can't figure out how to apply those colors anywhere. Can't add a color or class in the items either.
breadcrumbItems() {
return [
{
text: this.$t("receiving.breadcrumbs.step1"),
disabled: this.item.Status !== "STEP1"
},
{
text: this.$t("receiving.breadcrumbs.step2"),
disabled: this.item.Status !== "STEP2"
},
{
text: this.$t("receiving.breadcrumbs.step3"),
disabled: this.item.Status !== "STEP3"
}
];
}
<v-breadcrumbs :items="breadcrumbItems" class="breadStyle">
<template v-slot:divider>
<v-icon size="25">mdi-forward</v-icon>
</template>
</v-breadcrumbs>
Looking at the API for v-breadcrumbs: https://vuetifyjs.com/en/api/v-breadcrumbs-item/ it doesn't provide a property "color" or something similar, but there is a slot, so you can pass any kind of components in it.
You can create a <span> and customize its color and its style depending on the items:
<template>
<v-breadcrumbs :items="items">
<template v-slot:divider>
<v-icon size="25">mdi-forward</v-icon>
</template>
<template v-slot:item="{ item }">
<v-breadcrumbs-item :disabled="item.disabled">
<span :style="`color: ${item.color}`">
{{ item.text.toUpperCase() }}
</span>
</v-breadcrumbs-item>
</template>
</v-breadcrumbs>
</template>
<script>
export default {
data: () => ({
items: [
{
text: "Dashboard",
disabled: false,
color: "green",
},
{
text: "Link 1",
disabled: false,
color: "blue",
},
{
text: "Link 2",
disabled: true,
color: "red",
},
],
}),
};
</script>
I've found that the deep selector (https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors) often helps with styling Vuetify components. I added this to my components scoped CSS and the colours work just fine for links:
.v-breadcrumbs >>> a {
color: purple;
}
I found the relevant tag by looking through the Elements-tab under Inspect (in Chrome).
I don't know if this is the best solution for your specific situation, but figured I'd add this for anyone with a simpler use case.
I use NuxtJs and Vuetify for one project. I need to create a treeview so I would like to do it with v-treeview.
I have a problem with the node name.
Here are my data:
items: [
{
id: 1,
data: {
name: 'Application :',
id: '1',
},
children: [
{},
],
},
}
Here the frontend
<v-treeview :items="items"></v-treeview>
So I would like to have data.name in text but I can't get it. Do you have an idea?
Thanks
Add the item-text property to your v-treeview tag to specify what the value to be displayed is
:item-text="data.name"
you can use the label slot inside your v-treeview like :
<v-treeview :items="items">
<template v-slot:label="{item}">
<div class="v-treeview-node__label">{{item.data.name}}</div>
</template>
</v-treeview>
Hi I am starting with VueJS but I have a problem how to connect IMG src in my template with URL writing in my file JSON .for example when I have some product and I like to show full logo for each article I need to add URL exists in file JSON to src IMG .how I do that please thank
<img src="info.imglogo" alt="Media Aside" />
<span v-text="info.logotitle"></span>
</template>
var infos = [
{
compteur: 1,
imglogo: "../imgs/theme.jpg",
logotitle: "Themeforest",
title: "Thrive Themes",
description:
"Conversion Focused WordPress Themes & Plugins, built from the ground up to make your entire website convert more of your visitors into subscribers, customers & clients.",
link1: "Visit ThriveTheme",
link2: "Read Review",
url: "../imgs/theme.jpg"
},
{
compteur: 2,
logotitle: "Elegant",
title: "Sub-Ex",
description: "com.goodreads.Tres-Zap",
link1: "Dr",
link2: "Honorable",
url: "../imgs/theme.jpg"
},
];
export default {
data() {
return {
infos: infos
};
},
name: "Home",
components: {}
};
</script>
like this.
<template>
<div v-for="(info, index) in infos" :key="index">
<img :src="info.imglogo" alt="Media Aside" v-if="info.imgLogo != undefined" />
<span v-text="info.logotitle"></span>
</div>
</template>
You can do as follow:
<img :src="info.imglogo" alt="Media Aside" />
Explanation:
If you use variables and not text, you have to prepend your HTML attributes by ":"
Here is a working code. Replace your entire vue file by this one:
<template>
<div>
<div v-for="info in infos" :key="info.compteur">
<img :src="info.imglogo" alt="Media Aside" />
<span v-text="info.logotitle"></span>
</div>
</div>
</template>
<script>
export default {
name: "Home",
components: {},
data() {
return {
infos: [
{
compteur: 1,
imglogo: "../imgs/theme.jpg",
logotitle: "Themeforest",
title: "Thrive Themes",
description:
"Conversion Focused WordPress Themes & Plugins, built from the ground up to make your entire website convert more of your visitors into subscribers, customers & clients.",
link1: "Visit ThriveTheme",
link2: "Read Review",
url: "../imgs/theme.jpg",
},
{
compteur: 2,
logotitle: "Elegant",
title: "Sub-Ex",
description: "com.goodreads.Tres-Zap",
link1: "Dr",
link2: "Honorable",
url: "../imgs/theme.jpg",
},
],
};
},
};
</script>
I have some products that are being iterated over and being displayed. I'd like to use the images of the products as links to the specific page of each individual product. I want each product page to pull from the same template, substituting the props with the appropriate product details.
An example url for a product would be something like: /shop/product/name-of-product
Here is the relevant code:
<template>
<div class="p-avaible" v-for="item in avaibleProducts" :key="item.name">
<router-link :to={ name: 'avaibleProducts' , params: { id: 1 }}>
<img :key="item.image" :src="item.image">
</router-link>
<div class="p-name">{{ item.name }}</div>
<div class="p-price">€{{ item.price }}</div>
<div class="btn-container">
<button class="add-to-cart">ADD TO CART</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
cart: [],
avaibleProducts: [
{
name: "PLASTIC BAGS 3-PACK v1",
price: 0.33,
image: require('#/assets/plastic-bag-pack.jpg'),
description: 'First version plastic bags pack containing 3 HQ assets. Make sure to get yours today.',
id: 1
},
{
name: "VINYL TEXTURES 2-PACK v1",
price: 0.22,
image: require('#/assets/vinyl-texture-pack.jpg'),
description: 'First version vinyl texture pack containing 2 HQ assets. Make sure to get yours today.',
id: 2
},
{
name: "STICKER PACK 6-PACK v1",
price: 0.66,
image: require('#/assets/sticker-bag-pack.jpg'),
description: 'First version sticker bag pack containing 6 HQ assets. Make sure to get yours today.',
id: 3
}
],
};
}
};
</script>
Router/Index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Shop from '../views/Shop.vue'
import Product from '../views/Product'
Vue.use(VueRouter)
const routes = [
{
path: '/shop',
name: 'Shop',
component: Shop
},
{
path: '/product/:id',
name: Product,
component: Product
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
hey :)) first you must add a unique property to your product list like a uuid or anything, also you can use id property but its not a good method
step 1:
you must add uuid propery to your product object :
{
name: 'PLASTIC BAGS 3-PACK v1',
price: 0.33,
image: require('#/assets/plastic-bag-pack.jpg'),
description:
'First version plastic bags pack containing 3 HQ assets. Make sure to get yours today.',
id: 1,
uuid: 'prd-001' // pay attention to this line
},
step 2:
you need to create an computed propery
computed: {
showProduct() {
const id = this.$route.params.id;
const product = this.avaibleProducts.find((p) => p.uuid == id);
return product;
},
step 3:
and in your template you can access it like this:
<ul>
<li>{{ showProduct.name }} - {{ showProduct.price }} <!-- and etc ... {{ showProduct.image }} --></li>
</ul>
step 4:
you can load single product in this route:
/product/prd-001
the above route return your first product in your available products state
step 5:
change your this line in your Router/Index.js file
name: Product
and put it in single quotation like this :
name: 'Product'
and change your router-link like this :
<router-link :to="{name: 'Product' , params:{ id: product.uuid }}">{{ product.name}}</router-link>
well done!
You're missing one important part in your router index.js file. You need to enable prop passing in the Product components
Router/Index.js
{
path: '/product/:id',
name: Product,
component: Product,
props: true
}
Now you can actually pass props to your routes via a <router-link> element.
Now all you have to do is pass the appropriate props to the component. You can do this by emulating an API call on the component's created() hook.
I recommend you make a JSON file that you put somewhere in your src directory with all the details for the products. Instead of importing your image via webpack, just do it statically by putting the images in public/images.
You then need to make sure that the id is a unique URL-valid string if you want to use it as the param in the URL as you specified. It would look something like this:
#/assets/json/productList.json:
[
{
"id": "plastic-bag",
"name": "PLASTIC BAGS 3-PACK v1",
"price": 0.33,
"image": "/images/products/1.jpg",
"description": "First version plastic bags pack containing 3 HQ assets. Make sure to get yours today."
},
....
]
Then in your Product.vue component:
<template>
<div>
<img :src="product.image" alt="">
<h1>{{ product.name }}</h1>
<pre>${{ product.price }} USD</pre>
<p>{{ product.description }}</p>
</div>
</template>
<script>
import products from "#/assets/json/productList.json";
export default {
data() {
return {
product: null;
};
},
created() {
this.setProduct();
},
methods: {
setProduct() {
const currentProject = products.find(project => project.id === this.$route.params.id); // Find project via the route id param
this.product = currentProject;
}
}
};
</script>
I'm using vuetify and laravel to display some data from an array using vuetify's data table. The data get's displayed on the table fine, but these two errors appear? I need some help as for what I can do to avoid these errors.
Errors:
Error in render: "TypeError: this.items.slice is not a function"
Invalid prop: type check failed for prop "items". Expected Array, got Object
I've tried searching for the Invalid prop error for a while now but still nothing helped. As for the error in render part, this is where I really haven't found anything.
.Vue Data table:
<v-data-table
:headers="headers"
:items="lists"
class="elevation-1"
>
<v-btn color="success">Success</v-btn>
<template v-slot:items="lists">
<td class="text-xs-left">{{ lists.item.Customer }}</td>
<td class="text-xs-right">{{ lists.item.Address }}</td>
<td class="justify-center layout px-0">
<v-icon small class="mr-2" color="teal">visibility</v-icon>
<v-icon small class="mr-2" color="orange darken-2">edit</v-icon>
<v-icon small color="red darken-2">delete</v-icon>
</td>
</template>
script:
<script>
let Add = require('./Add.vue');
export default {
components: { Add },
data () {
return {
lists:{},
errors:{},
headers: [
{
text: 'Customer',
align: 'left',
value: 'Customer'
},
{ text: 'Address', value: 'Address' },
{ text: 'Contact No', value: 'CustomerContactNo' },
],
}
},
mounted(){
axios.post('/getData')
.then((response)=> this.lists = response.data)
.catch((error) => this.errors = error.response.data)
}
}
</script>
How do I avoid these errors? Any help is appreciated, Thanks.
Both errors suggest you have a prop called items that is being passed an object instead of an array.
A candidate would be the prop called items here:
<v-data-table
:headers="headers"
:items="lists"
class="elevation-1"
>
Based on those errors we can guess that the value lists might incorrectly be an object. Digging further, if we take a look in your JS code we find this:
data () {
return {
lists: {},
So your initial value is an object, not an array. Once your remote data shows up it will be replaced with an array and everything will appear to work correctly.
Try changing lists: {}, to lists: [],.