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>
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 want to trigger option change for the el-select element of element-ui library, can anyone help how should i trigger it to change from option2 of default to option1 or something else using vue-test-utils with jest ?
I tried triggering 'change' event on el-select but nothing happens..
Below is how my rendered el-select element looks:
<div class="el-select testSelect">
<div class="el-input el-input--suffix">
<input type="text" readonly="readonly" autocomplete="off" placeholder="Select" class="el-input__inner">
<span class="el-input__suffix"><span class="el-input__suffix-inner"><i
class="el-select__caret el-input__icon el-icon-arrow-up"></i>
</span>
</span>
</div>
<div class="el-select-dropdown el-popper" style="display: none;">
<div class="el-scrollbar" style="">
<div class="el-select-dropdown__wrap el-scrollbar__wrap el-scrollbar__wrap--hidden-default">
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item"><span>Option1</span></li>
<li class="el-select-dropdown__item selected"><span>Option2</span></li>
<li class="el-select-dropdown__item"><span>Option3</span></li>
<li class="el-select-dropdown__item"><span>Option4</span></li>
<li class="el-select-dropdown__item"><span>Option5</span></li>
</ul>
</div>
<div class="el-scrollbar__bar is-horizontal">
<div class="el-scrollbar__thumb" style="transform: translateX(0%); webkit-transform: translateX(0%);">
</div>
</div>
<div class="el-scrollbar__bar is-vertical">
<div class="el-scrollbar__thumb" style="transform: translateY(0%); webkit-transform: translateY(0%);">
</div>
</div>
</div>
</div>
</div>
I am running into a particular problem with Prettier alongwith Vue.js since a very long time. It seems like there's no solution to this so I am posting a question here as a last resort. This issue happens if your HTML code is nested deep and you have printWidth attribute is enabled in Prettier (which is enabled by default).
Prettier 2.1.2
Playground link
--parser vue
Input:
<template>
<div>
<div>
<div>
<div>
<div>
<ol>
<li>
<router-link class="xyz-class abc-class" to="/home">Home</router-link>
</li>
<li>
<router-link class="xyz-class abc-class" to="/posts">Posts</router-link>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</template>
Output:
<template>
<div>
<div>
<div>
<div>
<div>
<ol>
<li>
<router-link class="xyz-class abc-class" to="/home"
>Home</router-link
>
</li>
<li>
<router-link class="xyz-class abc-class" to="/posts"
>Posts</router-link
>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</template>
Expected behavior:
Any of these would be fine and neater in my opinion.
<template>
<div>
<div>
<div>
<div>
<div>
<ol>
<li>
<router-link class="xyz-class abc-class" to="/home">
Home
</router-link>
</li>
<li>
<router-link class="xyz-class abc-class" to="/posts">
Posts
</router-link>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</template>
OR
<template>
<div>
<div>
<div>
<div>
<div>
<ol>
<li>
<router-link
class="xyz-class abc-class"
to="/home"
>Home</router-link>
</li>
<li>
<router-link
class="xyz-class abc-class"
to="/posts"
>Posts</router-link>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</template>
Am I missing some option here that I can disable/enable to prevent this? If so, please guide.
I've found a solution to this problem. Leaving it here for people who land here by search.
Set the option --html-whitespace-sensitivity to ignore and you will get this output:
<template>
<div>
<div>
<div>
<div>
<div>
<ol>
<li>
<router-link class="xyz-class abc-class" to="/home">
Home
</router-link>
</li>
<li>
<router-link class="xyz-class abc-class" to="/posts">
Posts
</router-link>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</template>
Although this is not recommended as whitespace formatting can cause issues like extra spacing around text and stuff, which might affect your UI design's consistency.
More info about this here: https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting
Thanks to this reply on GitHub: https://github.com/prettier/prettier/issues/9381#issuecomment-707156908
What is my code failing to compile v-else used on element <div> without corresponding v-if. ?
In the <div class="card">, I want to conditionally render the input and also show either the editor-container or ql-editor.
<template>
<li
class="component composition">
<div
v-if="editable == true"
class="drag-handle">
<icon-drag-handle></icon-drag-handle>
</div>
<div class="card">
<input
v-if="component"
#keypress="setUnsaved(true); autosave($event, "title", editorTitleId)">
</input>
<div
v-if="editable==true"
#keypress="setUnsaved(true); autosave($event, "content", editorContentId)"
class="editor-container">
</div>
<div
v-else
v-html="compositionContentHTML"
class="ql-editor">
</div>
</div>
<div
v-if="editable == true"
class="component-actions">
<a #click.prevent.stop="deleteComponent">
<icon-times></icon-times>
</a>
</div>
</li>
</template>
I was trying to move the some functionality which is the Drop down of the Laravel Spark at the NavBar to my app.blade.php .
my code looks like this
<body class="skin-1">
<!-- Wrapper-->
<div id="spark-app" v-cloak>
<!-- Navigation -->
#include('layouts.wf_navigation')
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg">
<!-- Main view -->
#yield('content')
<!-- Footer -->
#include('layouts.footer')
</div>
<!-- End page wrapper-->
</div>
<!-- End wrapper-->
#show
<script src="/js/app.js"></script>
but I am getting an error
Uncaught ReferenceError: Bus is not defined
the error is referencing to this line of code in APp.js
Bus.$on('updateUser', function () {
self.getUser();
})
UPDATE
The Bus variable is defined in the App.js itself the code looks like this
if (window.Vue === undefined) {
window.Vue = __webpack_require__(287);
window.Bus = new Vue();
}
note: the previous issue got fixed by removing the the extra Vuejs file which was included in the top of my app.blade.php
Update 1
There is new error
[Vue warn]: Templates should only be responsible for mapping the state
to the UI. Avoid placing tags with side-effects in your templates,
such as .
the templates which are being included are
wf_navigation.blade.php
<div class="row border-bottom">
<nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
<form role="search" class="navbar-form-custom" method="post" action="/">
<div class="form-group">
<input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search" />
</div>
</form>
</div>
<ul class="nav navbar-top-links navbar-right">
<?php $currentTeam = auth()->user()->currentTeam; ?>
#if($currentTeam)
<li>
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ $currentTeam->name }}
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
Profile
</li>
<li>
Members
</li>
<li>
Subscription
</li>
<li>
Invoices
</li>
#include('spark::nav.teams')
</ul>
</li>
#endif
</ul>
</nav>
</div>
Which is calling #include('spark::nav.teams')
the teams.blade.php looks like this
<li class="dropdown-header">{{ ucfirst(str_plural(Spark::teamString())) }}</li>
<!-- Create Team -->
#if (Spark::createsAdditionalTeams())
<li>
<a href="/settings#/{{str_plural(Spark::teamString())}}">
<i class="fa fa-fw fa-btn fa-plus"></i>Create {{ ucfirst(Spark::teamString()) }}
</a>
</li>
#endif
<!-- Switch Current Team -->
#if (Spark::showsTeamSwitcher())
<li v-for="team in teams">
<a :href="'/{{ str_plural(Spark::teamString()) }}/'+ team.id +'/switch'">
<span v-if="user.current_team_id == team.id">
<i class="fa fa-fw fa-btn fa-check text-success"></i>#{{ team.name }}
</span>
<span v-else>
<img :src="team.photo_url" class="spark-team-photo-xs"><i class="fa fa-btn"></i>#{{ team.name }}
</span>
</a>
</li>
#endif
<li class="divider"></li>
'footer.blade.php'
<div class="footer">
<div class="pull-right">
V4.0
</div>
<div>
<strong>Powered By</strong> Energy Engine © 2010-2017
</div>
</div>
I am new to vue so no idea whats happening there