How to modify src attribute in image to make many cards VueJS - vue.js

I want to have many card from my component and I want to change the src attribute on every image. Please help me to do it. Thankyou :D
<!---THIS IS MY PAGE FILE---->
<template>
<div>
<class-list :src="image1"></class-list>
<class-list :src="image2"></class-list>
<class-list :src="image3"></class-list>
<class-list :src="image4"></class-list>
</div>
</template>
<!---THIS IS MY COMPONENT FILE---->
<template>
<div>
<a-card hoverable style="width: 240px">
<img
slot="cover"
alt="example"
:src="image"
/>
<a-card-meta title="Europe Street beat">
<template slot="description">
www.instagram.com
</template>
</a-card-meta>
</a-card>
</div>
</template>

This kind of code should solve your use-case, here is a SFC link.
page
<template>
<div v-for="image in images">
<card :image="image"></card>
</div>
</template>
<script>
import Card from './Card.vue'
export default {
components: { Card },
data() {
return {
images: ['https://images.pexels.com/photos/5044497/pexels-photo-5044497.jpeg', 'https://images.pexels.com/photos/9365604/pexels-photo-9365604.jpeg', 'https://images.pexels.com/photos/10392192/pexels-photo-10392192.jpeg']
}
}
}
</script>
Card.vue
<template>
<div>
<img slot="cover" alt="example" :src="image" />
</div>
</template>
<script>
export default {
props: ['image']
}
</script>
<style scoped>
img {
width: 200px;
}
</style>
Here is the end result

Related

Vue.js return and render templates

I have 2 templates in which the child one loop through images.I need to send it to the parent as array of templates and then loop them in the parent in order to avoid duplicates.How to accomplish that? below are the codes :
Products.vue (parent):
<template>
<div>
<div class="u-repeater u-repeater-1"><!--product_item-->
<div
class="u-align-center-lg u-align-center-sm u-align-center-xl u-align-center-xs u-container-style u-products-item u-repeater-item">
<ImageComponent></ImageComponent>
</div><!--/product_item--><!--product_item-->
</div>
</div>
</template>
ImageComponent.vue: (child)
<template>
<div class="u-container-layout u-similar-container u-container-layout-1">
<div v-for="n in Object.keys(products[0]).length" :key="n">
<img alt="" :src="products[n].image" data-image-width="510" data-image-height="340"
class="u-expanded-width-lg u-expanded-width-md u-expanded-width-sm u-expanded-width-xl u-image u-image-default u-product-control u-image-1">
<div
class="u-align-center u-container-style u-expanded-width-xs u-group u-opacity u-opacity-70 u-palette-5-light-2 u-group-1">
<div class="u-container-layout u-container-layout-2">
<h4 data-animation-name="fadeIn" data-animation-duration="1000" data-animation-delay="0"
data-animation-direction="Up" class="u-product-control u-text u-text-1 animated fadeInUp-played"
style="will-change: transform, opacity; animation-duration: 1000ms;">
{{ products[n].model }}
</h4>
<div class="u-align-left u-product-control u-product-price u-product-price-1">
<div class="u-price-wrapper u-spacing-10">
<div class="u-hide-price u-old-price">$12</div>
<div class="u-price" style="font-size: 1.25rem; font-weight: 700;">{{ products[n].price }}</div>
</div>
</div>
<a href="#"
class="u-align-center-xs u-border-active-none u-border-hover-none u-btn u-btn-rectangle u-button-style u-none u-product-control u-text-palette-1-base u-btn-1">Add
to Cart</a>
</div>
</div>
</div>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: "ImageComponent",
data(){
return{
items:[
]
}
},
computed: {
...mapState({
products: (state) => state.products,
}),
}
}
</script>
<style scoped>
.u-palette-5-light-2, .u-body.u-palette-5-light-2, .u-container-style.u-palette-5-light-2:before, .u-container-layout.u-palette-5-light-2:before, .u-table-alt-palette-5-light-2 tr:nth-child(even) {
color: #111111;
background-color: unset;
}
</style>
Remark: not all codes are written, just to give the main idea.
Thanks for help.

How to send props in Vue

I am quite new in vue so I haven't understood the logic completely. My question is I have ticket and ticketlist components. So I am not on my ticket list component I am creating some tickets data and I want to show them according to the ticket component. To make it more clear here is my ticketlist component:
<template>
<section class="tickets">
<div class="container">
<div class="row">
<div class="col-12 col-md-3 mb-3">
<Ticket v-for="ticket in tickets" :key="ticket.id" :product="ticket"/>
</div>
</div>
</div>
</section>
</template>
<script>
import Ticket from './Ticket'
export default {
components: {
Ticket
},
data() {
return {
tickets: [
{
id: 0,
category: "Einzelkarte",
price: "€3,50",
tariff: [
"Wählen Sie eine Option",
"Erwachsene",
"Erwachsener erm.",
"Kinder / Jugendliche",
"Kinder / Jugendliche erm.",
],
available_amount: 23,
article_number: "2021.05.04-2673990197-1",
},
],
};
},
}
</script>
And also ticket component:
<template>
<widget type="ticket" class="--flex-column">
<div class="top --flex-column">
<div class="bandname -bold">Ghost Mice</div>
<div class="tourname">Home Tour</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/concert.png" alt="" />
<div class="deetz --flex-row-j!sb">
<div class="event --flex-column">
<div class="date">3rd March 2017</div>
<div class="location -bold">Bloomington, Indiana</div>
</div>
<div class="price --flex-column">
<div class="label">Price</div>
<div class="cost -bold">€{{ ticket.price }}</div>
</div>
</div>
</div>
<div class="rip"></div>
<div class="bottom --flex-row-j!sb">
<a class="btn button" href="#">ADD TO CART</a>
</div>
</widget>
</template>
<script>
export default {
props: ['ticket'],
}
</script>
<style scoped>
#import 'https://i.koya.io/flex/1.1.0.css';
*, ::after, ::before {
box-sizing: unset;
}
</style>
So, I am showing TicketList component in one of the page but the thing is it doesnt show anything. So I wonder how can I connect them together and show tickets data according to ticket component. I hope I am clear but if I am not I can answer you in the comments.
The probleme is the props name, you need to pass ticket as props and not product
...
<Ticket v-for="ticket in tickets" :key="ticket.id" :ticket="ticket"/>
...
or the contrary inside you Ticket component set :
props: ['product']

PrimeVue Toast displaying html tags

How can I implement displaying a link in a primevue toast message? I cannot use v-html directive and triple brackets do not work. Does anybody has another idea how to solve it?
A hacky way is to extends Toast component:
Here a codesandbox : https://codesandbox.io/s/extend-primevue-toast-o5o1c?file=/src/CustomToastMessage.vue
1. On your component
Import your custom toast component where you need to call this.$toast:
<template>
<div>
<CustomToast />
<CustomToast position="top-left" group="tl" />
<CustomToast position="bottom-left" group="bl" />
<CustomToast position="bottom-right" group="br" />
<div class="card">
<Button #click="test" label="test" />
</div>
</div>
</template>
<script>
import CustomToast from "./CustomToast.vue";
export default {
components: {
CustomToast,
},
data() {
return {
messages: [],
};
},
methods: {
test() {
this.$toast.add({
severity: "success",
summary: "Test",
detail: "<b>Test Bold</b>",
});
},
},
};
</script>
2. CustomToast.vue (extend primevue toast)
<template>
<Teleport to="body">
<div ref="container" :class="containerClass" v-bind="$attrs">
<transition-group name="p-toast-message" tag="div" #enter="onEnter">
<CustomToastMessage
v-for="msg of messages"
:key="msg.id"
:message="msg"
#close="remove($event)"
/>
</transition-group>
</div>
</Teleport>
</template>
<script>
import Toast from "primevue/toast/Toast.vue";
import CustomToastMessage from "./CustomToastMessage.vue";
export default {
extends: Toast,
components: {
CustomToastMessage,
},
};
</script>
3. CustomToastMessage (extend primevue toastmessage)
Add v-html where you want to have html
<template>
<div
:class="containerClass"
role="alert"
aria-live="assertive"
aria-atomic="true"
>
<div class="p-toast-message-content">
<span :class="iconClass"></span>
<div class="p-toast-message-text">
<span class="p-toast-summary">{{ message.summary }}</span>
<div class="p-toast-detail" v-html="message.detail"></div>
</div>
<button
class="p-toast-icon-close p-link"
#click="onCloseClick"
v-if="message.closable !== false"
type="button"
v-ripple
>
<span class="p-toast-icon-close-icon pi pi-times"></span>
</button>
</div>
</div>
</template>
<script>
import ToastMessage from "primevue/toast/ToastMessage.vue";
export default {
extends: ToastMessage,
};
</script>
There is an easiest solution.
Just implement your own template.
Example:
<Toast :position="toastPosition">
<template #message="slotProps">
<span :class="iconClass"></span>
<div class="p-toast-message-text">
<span class="p-toast-summary">{{slotProps.message.summary}}</span>
<div class="p-toast-detail" v-html="slotProps.message.detail" />
</div>
</template>
</Toast>

Cant Display img when using props to store src on vue js

so on this project i was trying to make an image component to display an image from a string props.
here is my component code
this is the component
<template>
<div class="Img-grid">
<div class="container">
<div class="col">
<img :v-bind:src="recipeImage" alt="image-photo">
<p>{{recipeName}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ImgGrd'
props: {
recipeImage: String,
recipeName: String
}
}
</script>
this is my where the component display
<template>
<div class="RecipeByYou">
<div class="container">
<ImgGrid recipeName="a" v-bind:recipeImage="imgUrl" />
</div>
</div>
</template>
<script>
import ImgGrid from '../components/Image_Grid.vue'
export default {
name: 'RecipeImage',
components: {
Header,
ImgGrid
},
data () {
return {
imgUrl: 'https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png'
}
}
}
am i doing anything wrong? because when i inspect the web element it shows this thing, so i was confuse where did i do wrong, is this the correct method?
<img data-v-366ed4fa="" v-bind:src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="image-photo">
change this code <img :v-bind:src="recipeImage" alt="image-photo"> to <img v-bind:src="recipeImage" alt="image-photo">.
or you can change <img :v-bind:src="recipeImage" alt="image-photo"> to <img :src="recipeImage" alt="image-photo">.
: is shorthand of v-bind, your code :v-bind:src="recipeImage" means v-bind:v-bind:src="recipeImage"

Vue how to customize global navbar at view level

Im super new to Vue.
i have a Vue-CLI app, which have a navbar and content.
Navbar is common to all pages, but i want to customize in each page whit some additional content.
Example:
Common-> home | about
View home -> home | about | your are in view home
View about -> home | about | your are in view about
router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import NavBar from '#/components/NavBar.vue';
Vue.use(VueRouter);
Vue.component('nav-bar', NavBar);
//...
components/navbar.vue
<template>
<div>
<b-nav-item to="/">home</b-nav-item>
<b-nav-item to="/about">about</b-nav-item>
{{customContent}}
</div>
</template>
<script>
export default {
name: 'NavBar',
props: {
customContent: {
type: String,
default: 'default Content',
},
},
};
</script>
App.vue
<template>
<div id="app">
<nav-bar />
<div class="container-fluid">
<router-view />
</div>
</div>
</template>
views/home.vue
<template>
<div class="row">
<div class="col-12">
<image-card :images="images"/>
</div>
</div>
</template>
<script>
//how can i customize here the navbar by adding for example 'your are in view home'???
</script>
Thanks so much!
There are a few ways in which you can solve this problem. I'll list two of them.
1. Update NavBar by $route
In this approach, the NavBar component already contains all of the possible combinations, and will display the relevant portion(s) depending on what $route contains.
Here's some pseudo code:
navbar.vue
<template>
<div class="navbar">
<div class="navbar-left>
APPNAME
</div>
<div v-if="name === 'landing'">
...
</div>
<div v-else-if="name === 'room'">
...
</div>
</div>
</template>
App.vue
<template>
<div id="app">
<NavBar :name="$route.name"/>
<main>
<router-view/>
</main>
</div>
</template>
In this example, the NavBar component is very rigid, and doesn't really lend itself to much reuse. However, it does encapsulate all the relevant code relating to the nav bar.
2. Extensible NavBar with slots
In this approach, the NavBar only provides the bare-minimum to create a nav bar. The rest of the route-specific elements are to be filled in by the views.
navbar.vue
<template>
<div class="navbar">
<div class="navbar-left">
<div class="navbar-brand">
APPNAME
</div>
<slot name="left"></slot>
</div>
<div class="navbar-right">
<slot name="right"></slot>
</div>
</div>
</template>
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
landing.vue
<template>
<div>
<header>
<NavBar>
<template slot="right">
<span>
<div class="navbar-item">
<div class="buttons">
<button class="button" #click="...">Start Watching</button>
</div>
</div>
</span>
</template>
</NavBar>
</header>
<main>
...
</main>
</div>
</template>
This approach has a bit of repetition in terms of DOM elements, but gives you an extremely flexible NavBar that can be customized by each view.
The approach you want to use depends on what is important to you.
If strict encapsulation is what you want, then you may want to use approach 1, as all of the NavBar-related code is contained within a single file.
However, if you believe that there is a potential for reuse, or if you would like all view-related code to live in one place, then it makes sense to use slots instead and extend the NavBar as required by each view.
I use a breadcrumb to achieve a similar thing. Just an idea but Vue router allows you to add meta data to the current route which you always have access to
router.js
path: '/add',
name: 'add',
component: () => import(/* webpackChunkName: "add" */ '../../views/Add.vue'),
meta: {
breadCrumb: [
{ name: 'Add New' }
]
},
Notice the meta object attached to the route.. this will be used to describe the current view.
Breadcrumb.vue component
<template>
<div class="breadcrumb">
<ul class="d-flex m-0 p-0"
<li
v-for="(breadcrumb, idx) in breadcrumbList"
:key="idx">
{{ breadcrumb.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Breadcrumb',
data () {
return {
breadcrumbList: []
}
},
mounted () { this.updateList() },
watch: { '$route' () { this.updateList() } },
methods: {
routeTo (pRouteTo) {
if (this.breadcrumbList[pRouteTo].link) this.$router.push(this.breadcrumbList[pRouteTo].link)
},
updateList () { this.breadcrumbList = this.$route.meta.breadCrumb },
formatPath(path) {
const newPath = path.replace(/\//g, " > ")
return newPath
}
}
}
</script>
And then you can import the breadcrumb into your navbar or where ever you would like to place it
<Breadcrumb class="breadcrumb" />
import Breadcrumb from '#/components/Breadcrumb.vue'
components: {Breadcrumb}
So basically the breadcrumb will always watch your current route and change the data based on the meta data you provide in your router.js file
You can access to router name like this:
<div v-if="this.$route.name == 'home'">
<HeaderTransparent />
</div>
<div v-else>
<HeaderWhite />
</div>