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>
Related
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.
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.
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 using getuikit's tab component ( https://getuikit.com/docs/tab ) in my Vue-App:
Now I see that every tab is active, if I use v-for to iterate through an array.
<ul class=" uk-tab-left" uk-tab>
<li v-for="test in tests" id="test">{{ test }}</li>
</ul>
In my codepen example you can see, that the class uk-active is always inserted automatically:
https://codepen.io/spqrinc/pen/Ydzbez
Is there a possibility to change this behavior?
You can add a empty li element before the loop to make sure the active class will not be added to the others.
Don't forget to add a key to the loop and bind the id.
<div id="app">
<div>
<div uk-grid>
<div class="uk-width-1-4#m">
<ul class=" uk-tab-left" data-uk-tab>
<li></li>
<li v-for="test in tests" :key="test" :id="test">
{{ test }}
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="app">
<div>
<div uk-grid>
<div class="uk-width-1-4#m">
<ul class=" uk-tab-left" data-uk-tab>
<template v-for="test in tests">
<li :key="test" :id="test">
{{ test }}
</li>
</template>
</ul>
</div>
</div>
</div>
</div>
I'm trying to produce the following (rendering div elements, broken up by a clearfix after every four elements):
<div class="col-md-3 form-group"></div>
<div class="col-md-3 form-group"></div>
<div class="col-md-3 form-group"></div>
<div class="col-md-3 form-group"></div>
<div class="clearfix></div>
....
And wondering if anything as the code below is possible in VueJS or can someone help me out with an alternative?.
<div v-for="(sku, n) in sku_pattern" :key="n" class="col-md-3 form-group"></div>
<div v-if="!((n+1)%4)" class="clearfix"> <!-- I know this won't work outside the scope of the previous element. -->
You can use <template> tag with v-for to render a block of multiple elements:
<template v-for="(sku, n) in sku_pattern">
<div class="col-md-3 form-group">
</div>
<div v-if="!((n+1)%4)" class="clearfix">
</template>
Reference document
Just in the addition of #ittus answer,
The solution to loop through siblings is the use of the template tag.
While, the template cannot be keyed, instead you have to put key on children's elements, like this will solve your problem.
<template v-for="(sku, n) in sku_pattern">
<div class="col-md-3 form-group" :key='n'>
</div>
<div v-if="!((n+1)%4)" class="clearfix" :key='n'>
</template>