I need to render a div with item class
<div class="ui horizontal list">
<transition-group name="custom-classes-transition” enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
<div class="item" v-for="(filter, filterIndex) in filters" :key="filterIndex”> .. </div>
</transition-group>
</div>
.item should be directly nested of .ui.list
I try to add tag="div” but this add a new div with my div.item
Simply add a class prop to your transition-group.
Example:
<transition-group class="ui horizontal list" name="custom-classes-transition" enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
<div class="item" v-for="(filter, filterIndex) in filters" :key="filterIndex"> .. </div>
</transition-group>
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 created an array of items and mapped them in Vue but I can't make them to flex-row using Tailwind CSS maybe there is something I don't know about in tailwind css flex-row feature
<div class="bg-white mt-5 rounded-tr-md rounded-tl-md">
<!-- Filter menus -->
<div
v-for="filter in filterTypes"
:key="filter.type"
class="flex flex-row items-center px-5 py-4"
>
<div class="">{{ filter.type }}</div>
</div>
<!-- Transactions According to Pages-->
<div></div>
</div>
You should place flex to the parent element, and there's no need to flex-row since flex direction is row by default :
<div class=" bg-white mt-5 rounded-tr-md rounded-tl-md">
<!-- Filter menus -->
<div class="flex items-center">
<div
v-for="filter in filterTypes"
:key="filter.type"
class=" px-5 py-4"
>
<div class="">{{ filter.type }}</div>
</div>
</div>
<!-- Transactions According to Pages-->
<div></div>
</div>
In my vuejs component, I have a form with submit button and a cancel button.
I want my buttons to align right
Following is my current code
<template slot="modal_actions">
<div class="flex items-center justify-end">
<close-overlay class="h-full" identifier="addNewScheduleModal">
<cs-button variant="blank">Cancel</cs-button>
</close-overlay>
<disables-submit-on-errors
:identifier="identifier"
#proceed="addNewSchedule"
>
<loading-button ref="submitBtnSave" size="normal">
Save & Close
</loading-button>
</disables-submit-on-errors>
</div>
</template>
Even though I'm using justify-end class, still the button are aligned left...
I'm struggling to find what I'm doing wrong and align them right....
I'm using tailwind-css
Assuming that your cancel button is at left and loading button is at right of cancel button.
Then there are two ways,
you can change the order of buttons inside div like this:
<template slot="modal_actions">
<div class="flex items-center justify-end">
<loading-button ref="submitBtnSave" size="normal">
Save & Close
</loading-button>
<disables-submit-on-errors
:identifier="identifier"
#proceed="addNewSchedule"
>
<close-overlay class="h-full" identifier="addNewScheduleModal">
<cs-button variant="blank">Cancel</cs-button>
</close-overlay>
.
.
</div>
</template>
You can change the flex-direction to row-reverse by adding class flex-row-reverse to the div. I have created a similar example below for understanding purpose.
<script src="https://cdn.tailwindcss.com"></script>
<div class="space-y-4">
<h3>Before</h3>
<div class="flex items-center justify-end h-96 w-full bg-red-200 space-x-10">
<div class="h-56 w-1/3 bg-red-700">Cancel Button</div>
<div class="h-56 w-1/3 bg-green-700">Loading Button</div>
</div>
<h3>After</h3>
<div class="flex flex-row-reverse items-center justify-end h-96 w-full bg-red-200 space-x-10">
<div class="h-56 w-1/3 bg-red-700">Cancel Button</div>
<div class="h-56 w-1/3 bg-green-700">Loading Button</div>
</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>
So I'm trying to bind the click event so it only runs when the actually href title is clicked on. here is my code.
<collapse :multiple-active="false">
<div v-for="(campaign, index) in allCampaigns" :key="index">
<collapse-item :title="campaign.campaign_name" #click.native.prevent="grabClientFacebookData(campaign.id)">
<div v-if="spinner == true" style="text-align: center"><img src="../../../../img/spinner.gif"></div>
<div v-if="search == true">
<vue-good-table
:columns="columns"
:rows="tableData"
styleClass="vgt-table striped bordered"/>
<highcharts :options="chartOptions"></highcharts>
</div>
</collapse-item>
</div>
</collapse>
And here is the parent element:
<div class="card card-plain">
<div role="tab" id="headingOne" class="card-header">
<a data-toggle="collapse"
data-parent="#accordion"
:href="`#${itemId}`"
#click.prevent="activate"
:aria-expanded="active"
:aria-controls="`content-${itemId}`">
<slot name="title" #click.prevent="grabClientFacebookData(campaign.id)">
{{title}}
</slot>
<i class="now-ui-icons arrows-1_minimal-down"></i>
</a>
</div>
<collapse-transition :duration="animationDuration">
<div v-show="active"
:id="`content-${itemId}`"
role="tabpanel"
:aria-labelledby="title"
class="collapsed">
<div class="card-body">
<slot></slot>
</div>
</div>
</collapse-transition>
I am fairly new to vue and was wondering if it's possible. My problem is that the click event shoots whenever any port of the collapse is clicked, not just the title.
have you tried wrapping {{title}} in a span with the event bound to that? i.e.
<span #click.prevent="grabClientFacebookData(campaign.id)">{{title}}</span>