List item
<ul>
<li>language</li>
< v-if= "tree()"> //which tag I may use or any other process
<li>home</li>
<li>about</li>
<>
< v-else> //which tag I may use or any other process
<li>accounts</li>
<li>listing</li>
<>
</ul>'
In the V-if which html tag i may use or any other vue.js process to work with this.
You can use template:
<template v-if="condition">
</template>
<template v-else>
</template>
Template will not be rendered in the browser. But it will parse the contents inside of this to the html.
you can sometimes use the <slot> element to make what you want. Have a look at the slot documentation here
Related
I have built a user-defined component (async-select) on top of another component (vue mutliselect) like this:
https://jsfiddle.net/2x7n4rL6/4/
Since the original vue-multiselect component offers a couple of slots, I don't want to loose the chance to use them. So my goal is to make these slots available from inside my custom component. In other words, I want to something like this:
https://jsfiddle.net/2x7n4rL6/3/
But that code oes not work.
However, if I add the slot to the child component itself, it works just fine (which you can see from the fact that options become red-colored).
https://jsfiddle.net/2x7n4rL6/1/
After surfing the web, I have come across this article, but it does not seem to work
Is there any way in VueJS to accomplish this ?
Slots can be confusing!
First, you need a template element to define the slot content:
<async-select :value="value" :options="options">
<template v-slot:option-tmpl="{ props }">
<div class="ui grid">
<div style="color: red">{{ props.option.name }}</div>
</div>
</template>
</async-select>
Then, in the parent component, you need a slot element. That slot element itself can be inside of another template element, so its contents can be put in a slot of its own parent.
<multiselect
label="name"
ref="multiselect"
v-model="localValue"
placeholder="My component"
:options="options"
:multiple="false"
:taggable="false">
<template slot="option" slot-scope="props">
<slot name="option-tmpl" :props="props"></slot>
</template>
</multiselect>
Working Fiddle: https://jsfiddle.net/thebluenile/ph0s1jda/
I am new to VueJS and I have a simple HTML markup where I iterate through some objects and render them in html like so:
<div v-for="item in some_counter">
<p v-if="item.some_param1 !== 'None'">
[[ item.some_param2 ]]
</p>
</div>
However, I notice that even when the condition evaluates to false, I see an extra HTML <div></div> markup. This seems very odd to me, coming from the Django world.
How do I avoid this extra markup?
The v-if applies to the element you place it on. So if you want to conditionally include the <div> you need to put the v-if on the <div> (or a parent element). It won't remove the <div> just because it is empty.
Technically you can have both v-for and v-if on the same element but it is generally discouraged as it can be confusing trying to understand which is applied first (see https://v2.vuejs.org/v2/guide/list.html#v-for-with-v-if). Instead you should include a wrapping <template> for the v-for:
<template v-for="item in some_counter">
<div v-if="item.some_param1 !== 'None'">
<p>
[[ item.some_param2 ]]
</p>
</div>
</template>
The <template> tag is special and won't add an extra element to the finished DOM.
An alternative approach would be to filter the list of items in a computed property and then iterate over the filtered list in your template.
New to VueJS... I have a component that I want to pass other components into based on the selection made in a dropdown. I have a main template that will always be rendered on the screen, part of which has a dropdown. When I make a selection in that dropdown I want to have a div inside that main component with an ID (or some other identifying property) and push another template inside of it. I'm thinking that a slot does the opposite of what I want..
Original Template:
<div class="search-field-with-label-container">
<el-select v-model="serviceType">
<el-option
v-for="serviceType in serviceTypes"
:key="serviceType.id"
:value="serviceType"
>{{ serviceType }}</el-option>
</el-select>
<div id="thisIsWhereIWantMyOtherTemplateToRender"
</div>
Second template:
<template>
<h1>this is the other template</h1>
</template>
You can use dynamic components with the keep-alive tag.
<keep-alive>
<component v-bind:is="selectedComponent"></component>
</keep-alive>
Documentation is here.
List item
<ul>
<li>language</li>
< v-if= "tree()"> //which tag I may use or any other process
<li>home</li>
<li>about</li>
<>
< v-else> //which tag I may use or any other process
<li>accounts</li>
<li>listing</li>
<>
</ul>'
In the V-if which html tag i may use or any other vue.js process to work with this.
You can use template:
<template v-if="condition">
</template>
<template v-else>
</template>
Template will not be rendered in the browser. But it will parse the contents inside of this to the html.
you can sometimes use the <slot> element to make what you want. Have a look at the slot documentation here
According to the Vue documentation I should be able to add the v-if condition to the <template> tag:
<template v-if="false">
<div>Invisible text</div>
</template>
But this will not hide the element, however it does work when added to the child element:
<template>
<div v-if="false">Invisible text</div>
</template>
Any suggestions?
I'm including the template in another .vue file:
<template>
<div id="app">
<H1 class= "main-title">Title</H1>
<span class="components">
<testtemplate></testtemplate>
</span>
</div>
</template>
The template tag of a single-file component is not rendered by Vue like normal <template> tags. It is simply one of the placeholders, along with <script> and <style> that vue-loader uses to build the component. The root element of that template is what will be the root in the component.
But, even if it worked the way you want, there would be no difference between your first and second example. Using v-if on the root will prevent the entire component's template from rendering if set to false.
Had this problem with VUE3. Using SFC just nest tag template inside another tag template :
<template>
<template v-if="false">
You won't see this
</template>
</template>