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>
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>
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>
I'm loading default listing using vuejs. When I browse page it show me following error
[Vue warn]: Error compiling template:
My html template is as bellow:
<template id="results-template">
<div class="results-wrap col-lg-8 col-md-8 ">
<h3>Results:</h3>
<div v-for="category in books" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0">
<div class="single-vertical-book box">
<div class="book mt-20 text-center">
<img v-bind:src="{{category.URL}}" />
<div class="book-title-latest">
{{category.Title}}
</div>
<div class="book-author-lastest">
<a href="#" v-if="(category.Category == result.id)" v-for="(result,key) in genres" v-bind:key="result.id">
{{result.name}}
</a>
</div>
</div>
</div>
</div>
</div>
</template>
I'm using API to get data. When I inspected API response it's showing me response correctly but vuejs is not showing data in template. My VueJs code is as bellow:
Vue.component('Results',{
template : '#results-template',
props: ['books','genres']
})
and VueJs method is as bellow:
getBooks : function(){
var vm = this;
return $.get('apis.php?gtype=Books')
.done(function(d){
vm.books = JSON.parse(d);
});
}
My created on loading page code is as bellow:
created : function(){
var vm = this;
this.getBooks().done(function(){
........
});
}
Code for data :
data : {
books : []
}
Please help me what's wrong I'm doing?
Your are binding image incorrect way first of all make it correct. Replace your code:
<template id="results-template">
<div class="results-wrap col-lg-8 col-md-8 ">
<h3>Results:</h3>
<div v-for="category in books" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0">
<div class="single-vertical-book box">
<div class="book mt-20 text-center">
<img :src="category.URL" />
<div class="book-title-latest">
{{category.Title}}
</div>
<div class="book-author-lastest">
<a href="#" v-if="(category.Category == result.id)" v-for="(result,key) in genres" v-bind:key="result.id">
{{result.name}}
</a>
</div>
</div>
</div>
</div>
</div>
</template>
with this code:
<template id="results-template">
<div class="results-wrap col-lg-8 col-md-8 ">
<h3>Results:</h3>
<div v-for="category in books" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0">
<div class="single-vertical-book box">
<div class="book mt-20 text-center">
<img v-bind:src="{{category.URL}}" />
<div class="book-title-latest">
{{category.Title}}
</div>
<div class="book-author-lastest">
<a href="#" v-if="(category.Category == result.id)" v-for="(result,key) in genres" v-bind:key="result.id">
{{result.name}}
</a>
</div>
</div>
</div>
</div>
</div>
</template>
You've to use :src="category.URL" for image src binding not :src="{{category.URL}}"
Secondly in template call you are using "genres" have you initialized genres array or not? this may also cause for error. 1st check both of causes if problem not solved the check further.
Problem is that both divs shows on load. I tried to use v-cloak only on one but its not working. If i put on parent div then its not look good while is hidden. Any suggestion how can i display only one div while page is loading, but without v-cloak?
<div class="center_image" v-if="avatarImageSet">
<div class="checked">
<div class="seller_image {{ in_role('BusinessUsers') ? 'agency' : '' }}">
<img src="{{ home_asset('img/very_big_user_icon.png') }}" alt="" />
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>
<div class="center_image" v-else>
<div class="checked">
<div class="seller_image">
<img v-bind:src="user_credentials.avatar" alt="Avatar"/>
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>
This might be happening because of other errors in your code, like:
<img src="{{ home_asset('img/very_big_user_icon.png') }}" alt="" />, you should use v-bind with src
class="seller_image {{ in_role('BusinessUsers') ? 'agency' : '' }}" You should be using dynamic class binding here.
See modified code:
<div class="center_image" v-if="avatarImageSet">
<div class="checked">
<div class="seller_image" :class="{`yourclass`: in_role('BusinessUsers') === 'agency'}">
<img :src="home_asset('img/very_big_user_icon.png')" alt="" />
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>
<div class="center_image" v-else>
<div class="checked">
<div class="seller_image">
<img v-bind:src="user_credentials.avatar" alt="Avatar"/>
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>