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.
Related
Hi there I'm trying to repeat a div n times,
<div v-for="(item,index) in details" :key="index">
<div class="col-md-8">
<div class="form-group">
<img src='./img' width="250" alt class="imageLOGO"/>
</div>
</div>
<div class=col-md-12>
<div class="form-group" style="display:flex; justify-content:center;">
<div >
<h1>TEST</h1>
<p>TEST</p>
<p>{{this.$t(reports.title)}}</p>
</div>
</div>
</div>
</div>
this is my data
data(){
return{
details: null
}
Details is filled with an array that contains objects,
I want to iterate in this array so I can show n times the component.
And is showing me this error, in others components this error message doesn't show
Cannot read property '$t' of undefined"
Thanks
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.
I display an array posts:[], which contain a JSON object. Everything is fine except that I can't display three columns in a row with Bootstrap. Even though I specified in the class="col-4". Here's my code.
<div class="" v-for="post of posts">
<div class="col-12 col-lg-4">
<router-link :to="'panneau/' + post['id_panneau']">
"...."
</router-link>
</div>
</div>
The v-for="..." property must be in the element you want to loop. In this case you are looping the first div not the one with the col-* class. Try remove the second div and add those classes to the first one.
<div class="col-12 col-lg-4" v-for="post of posts">
<router-link :to="'panneau/' + post['id_panneau']">
"...."
</router-link>
</div>
You can update your code as given below and check:
<div class="row">
<div class="col-12 col-lg-4" v-for="post of posts">
<router-link :to="'panneau/' + post['id_panneau']">
"...."
</router-link>
</div>
</div>
I am trying to have two alternating loops after each other on the same level. If I wrap it in a parent element and loop thru it brakes the styles.
Here is an example of what I am trying to do:
<div v-for="category in items" class="cat-name">{{ category.name }}</div>
<div v-for="category in items" class="cat-meta">{{ category.metaData }}</div>
Wanted Result:
<div class="cat-name">name1</div>
<div class="cat-meta">metadata1</div>
<div class="cat-name">name2</div>
<div class="cat-meta">metadata2</div>
<div class="cat-name">name3</div>
<div class="cat-meta">metadata3</div>
and so on...
I really hope that this is possible since it completely breaks the styles when I tried:
<div v-for="category in items">
<div class="cat-name">{{ category.name }}</div>
<div class="cat-meta">{{ category.metaData }}</div>
</div>
Really appreciate any help and input.
Thanks, -J
You could wrap both your elements in a template tag.
Unlike a basic tag, this one will not be rendered in the DOM.
<template v-for="category in items">
<div class="cat-name">{{ category.name }}</div>
<div class="cat-meta">{{ category.metaData }}</div>
</template>
Let's say I have the following case
<div class="entry">
<img src="image1.png">
</div>
<div class="entry">
<a href="#mylink">
<img src="image2.png">
</a>
</div>
Now, items needs to be iterated, using depending on a condition:
<div class="entry" v-for="o in items">
<a :href="o.url" v-if="o.url != ''">
<img :src="o.image">
</a>
<img :src="o.image" v-else>
</div>
With items = [{url: '', image: 'image1.png'}, {url: '#mylink', image: 'image2.png'}] this will correctly render to the same snippet from above:
<div class="entry">
<img src="image1.png">
</div>
<div class="entry">
<a href="#mylink">
<img src="image2.png">
</a>
</div>
But as you can see, I'm copy-pasting the <img> tag for the v-if directive. In this case I guess it's simple enough, but I want to know if there a more DRY approach.
I'm looking for something like:
<div class="entry" v-for="o in items">
<a :href="o.url" v-if-always-render-children="o.url != ''">
<img :src="o.image">
</a>
</div>
Which should render to the same snippet. Of course the directive v-if-always-render-children doesn't exists.
How to avoid declaring the <img> tag (and possible children tags) more than once?
v-else is fine, if you're really concerned about it and are worried about the size of the content, then make that content a component.
alternatively you can use render functions or jsx, but unless this thing gets quite a bit more complex, v-else is just fine