Vue Slick Carousel can't make image as a link - vue.js

I'm using vue-slick-carousel to build a slider. I have an issue with image which I wrapped as a link. When I click on image redirect doesn't happen. Also I have a title under image which I wrapped as a link too, and with text it works great, but when I click on image it doesn't. It doesn't work only on mobile devices, on desktop when I click on image it makes redirect.
Here is my code:
<VueSlickCarousel
ref="slick"
v-bind="slickOptions"
class="post-category__slider"
>
<div
v-for="post in posts"
:key="`post-${post.id}`"
class="post-category__list-item"
>
<div class="row">
<div class="col-lg-6">
<div
class="post-category__list-item-image mb-4"
>
<a
:href="`/${item.slug}/${post.slug}`"
>
<img
:src="$store.state.env.panelUrl + post.get_thumbnail"
:alt="post.title"
>
</a>
</div>
</div>
<div class="col-lg-6">
<div class="d-lg-flex flex-lg-wrap flex-lg-column justify-content-lg-between h-100">
<div class="mb-4">
<h4 class="post-card__text-block-title">
<a :href="`/${item.slug}/${post.slug}`">
{{ post.title }}
</a>
</h4>
<div>
{{ post.short_story }}
</div>
</div>
</div>
</div>
</div>
</div>
</VueSlickCarousel>

Try adding pointer-events: none to the images. It should do the trick.

please share your properties for a better picture, also try adding only the property with its object something like this: :href="item.slug/post.slug", but for better reference provide your properties.

Related

Vue JS: How to make two Vue Instances to work together on the same page?

I created a recipe website, you can find it here https://hungry-vegetarian.com/.
The tab on the index page is a vue instance. I'm trying to create a search bar that is also a vue instance.
The problem occurs when I try to display searched recipes on the index page. It just shows the search result on top of the search bar.
Ideally, only searched recipes should appear on the tab just like they are now but without any indications on top of the tab like Breakfast, Salad, Bakery, etc.
I don't know how to make two objects work together. For now, they work separately without communicating with each other.
SEARCH
<div id="search">
<div class="main-search">
<h1 class="search-question">What are you in the mood for?</h1>
<div class="search-box">
<input type="text" v-model="searchQuery" class="input-search" placeholder="Bread">
<button class="btn-search"><i class="fa fa-search"></i></button>
</div>
</div>
<div class="container">
<div class="recipe" v-for="post in filteredList">
<div v-if="searchQuery">
<a v-bind:href="post.url" class="recipe-card__card-link" target="_blank">
<img v-bind:src="post.image" alt="" class="recipe-card__image"/>
<div class="recipe-card__text-wrapper">
<h2 class="recipe-card__title">{{post.name}}</h2>
<div class="recipe-card__details-wrapper">
<p class="recipe-card__excerpt">{{post.body}}</p>
<a v-bind:href="post.url" class="recipe-card__read-more">Read more <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
tab
<main id="tab">
<header>
<nav>
<ul>
<div id="arrow">
<span></span>
<span></span>
<span></span>
</div>
<li v-for="(tab, tabName) in tabs" :key="tabName">
<button class="tab" #click="setTabActive(tabName)" :class="{'active': tabName === activeTab}">
<span class="tab-copy">{{ tabName }}</span>
<span class="tab-background">
</span>
</button>
</li>
</ul>
</nav>
</header>
<article>
<div class="container">
<transition name="fade" mode="out-in" appear :duration="500">
<tab-content v-for="(tabContent, t) in tabs" :data="tabContent" :key="'content'+t" v-if="t === activeTab" inline-template>
<div class="content-wrapper">
<div class="recipes" v-for="(recipe, i) in data.recipes" :key="i">
<a v-bind:href="recipe.url" class="recipe-card__card-link"></a>
<img :src="recipe.image" alt="" class="recipe-card__image">
<div class="recipe-card__text-wrapper">
<h2 class="recipe-card__title">{{recipe.name}}</h2>
<div class="recipe-card__details-wrapper">
<p class="recipe-card__excerpt">{{recipe.body}}</p>
<a v-bind:href="recipe.url" class="recipe-card__read-more">Read more <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</tab-content>
</transition>
</div>
</article>
</main>
I tried to combine instances search and tab into just one instance tab, but it always gives me a Vue warning:
[Vue warn]: Property or method "searchQuery" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
Also, I feel like I can have just the wrong approach to this problem I am trying to solve. Please, any suggestions are welcome. I am stuck.

can't make it look all in one line when display it on html page

vue.js
how can I make it look all in one line, next to each other?
TEMPLATE:
<div class="product">
<button #click="removeFromCart" :disabled="!inStock"> −</button>
<span>
<p v-if= "inStock == 0"> 💔 <span :class="{isRed: inStock === 0}"> {{inStock}} </span> </p>
<p v-else> ♥ {{inStock}}</p>
<button #click="addToCart" > + </button>
</span>
</div>
You can use class="row" for example in your div. Than all buttons, p-tags and so one will be shown on a row - like this:
<div class="row">
<!-- YOUR CODE IN HERE -->
</div>
To define the width of your b-button, p-tags, etc. you can use class="col-md-5 for example.. here is a link how you can define the width of a element in vue.js.
URL: https://vuetifyjs.com/en/components/grids/#order-first-and-last
Hopefully this helps you out.

How to display only one element of an array in Vue.js?

I have the following object with a "multimedia" array:
I only need one of the urls, but no idea how ot get it
<div
class="card mb-3"
style="max-width: 540px;"
v-bind:key="news.artices"
v-for="news in newsList" >
<div class="row no-gutters">
<div class="col-md-8">
<div class="card-body">
//this doesn't work
<p v-for="image in news.multimedia" v-bind:key="image">
{{image[0].url}}
</p>
//this works, but shows all
<p v-for="image in news.multimedia" v-bind:key="image">
{{image.url}}
</p>
<h5 class="card-title">{{news.title}}</h5>
</div>
</div>
</div>
</div>
If you want to display only one element of the multimedia array, then you don't need to use v-for unnecessarily. You can simply use:
<p v-bind:key="image" v-if="news.multimedia && news.multimedia.length">
{{ news.multimedia[0].url }}
</p>
Also, you can use v-if to make sure this div is only rendered if news.multimedia has a valid value and it not an empty array.
It looks like multimedia is an array of objects, so you could do: news.multimedia[0].url.

Bootstrap Profile Card

I'm trying to build a profile card in Bootstrap 3 and I'm having trouble getting the image to fit into the card. I think I can do this easier if I link to image in the css but I have many profile cards with all different people so I think keeping the image link in the HTML is better in this case.
Here's how I'd like it:
and here's the where I'm at:http://jsfiddle.net/L3789n7u/1/
Any help is greatly appreciated. Thanks!
~Tony
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6">
<div class="well">
<div class="profile-image">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg">
<div class="card-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As ever you have multiple options, here is example of one of them.
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6" style="border: 1px solid black;">
<div class="row">
<div class="profile-image" style="float:left;">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg" />
</div>
<div class="profile-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
<div class="profile-link">
VIEW PROFILE
</div>
</div>
</div>
</div>
</div>
</div>
Basically you need to make profile image to float left, so other content will appear next to it. Also because your example how you would like it contains border around card you need to wrap image, info and link in row. If you want to customize image size you can still use all Bootstrap's col-size-number.
Working example on JSFiddle

Make a fullscreen responsive slider by deleting div container?

thanks for helping:
here is my objectif: make Make a fullscreen responsive slider on a homepage with joomla:
the main problem my template's slider position is in multiple container just like these
<div>
<div id="ja-slider" class="wrap ">
<div class="main">
<div class="main-inner1 clearfix">
<div class="ja-moduletable ;Position: slider" id="Mod104">
<div class="moduletable-inner clearfix">
<div class="ja-box-ct clearfix">
<div id="slider" class="favslider">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
what I wish is:
<div>
<div id="ja-slider" class="wrap ">
<div id="slider" class="favslider">
</div>
</div>
</div>
is there anyone could help? thanks a lots! I'm not a programmer but I understand html and CSS.
thanks again! hoping this thread could helps others!
You might be able to override the existing code using an extension like ReReplacer or similar:
http://extensions.joomla.org/extensions/edition/replace/4336