This works:
<span v-if="name">
Hi there, {{ name }}
</span>
... but it forces me to use span for the whole text, I just want it on the name variable. In handlebars for example I could do:
{{#if name}}
Hi there, <span>{{ name }}</span>
{{/if}}
You can use a template for that.
we can use v-if on a <template> element, which serves as an invisible
wrapper. The final rendered result will not include the <template>
element.
For example:
<template v-if="name">
Hi there, <span>{{ name }}</span>
</template>
Related
I am trying to mimic the default behavior of using the slot tag in a parent component. When I use <template v-slot> The content doesn't automatically go there. What is the correct way to do this without using the slot tag?, as I read that this will be depreciated. Thank you
Actually, it's the slot attribute that is deprecated (not the built-in <slot> component).
Before v2.6, the slot attribute was used to specify the name of the slot for the given content, and slot-scope received the slot props:
<base-layout>
<template slot="header" slot-scope="{ subtitle }">
<h1>Here might be a page title</h1>
<h2>{{ subtitle }}</h2>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template slot="footer">
<p>Here's some contact info</p>
</template>
</base-layout>
From v2.6 forward, those two attributes are combined/replaced with the v-slot directive, where the slot name is given as an argument, and any slot props are received in the binding value:
<base-layout>
<template v-slot:header="{ subtitle }">
<h1>Here might be a page title</h1>
<h2>{{ subtitle }}</h2>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>
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
I have the following template within a Vue Multiselect component.
<template slot="option" scope="props">
<div class="option__desc">
<span class="flag-icon flag-icon-{{ props.option.code }}">{{ props.option.code }}</span>
<span class="option__small">{{ props.option.name }}</span>
</div>
</template>
I need to suffix props.option.code to the flag-icon- class but Vue does not allow me to add to the class this way anymore. It requires me to do it with v-bind however I've tried to make it work with v-bind and I cannot.
Is there a way to make this work with v-bind?
try this
<span :class="'flag-icon flag-icon-' + props.option.code">
Refer to the template below, how to add condition to make sure the menu is not undefined inside the v-for attribute?
I've tried v-for="menu?item in menu.items:[]" and v-for="item in menu?.items" but neither works.
<div v-for="item in menu.items">{{item.text}}</div>
Put the div with the v-for directive within a <template> that checks for menu via v-if:
<template v-if="menu">
<div v-for="item in menu.items">{{ item.text }}</div>
</template>
This way, the div inside the template won't be rendered if menu does not exist.
If you really want the check within the v-for statement, like you are attempting, it would look like this:
<div v-for="item in (menu ? menu.items : [])">{{ item.text }}</div>
I can't find a way to choose different options for rendering text inside of v-for. Is it possible or do I need to structure the logic differently to do something like the code below?
<template>
<ul v-show="showNotifications">
<li v-for="notification in notifications">
// if notification.type = 'friend request'
New friend request from {{ notification.name }}
// else
New notification from {{ notification.name }}
</li>
</ul>
</template>
Notification is a array of objects with data like name and notification type.
Use another template element like following (not tested)
<template>
<ul v-show="showNotifications">
<li v-for="notification in notifications">
<template v-if="notification.type == 'friend request'">
New friend request from {{ notification.name }}
</template>
<template v-else>
New notification from {{ notification.name }}
</template>
</li>
</ul>
I did what Xymanek said and that isn't work for me completely, I also added a method like this since I realize the component is reactive to the variable in "v-for", in this case "notifications"
forceReload(){
this.files.push(fakeNotification);
this.files.pop();
}
as can see this just force the v-for to "re-render" by pushing a fake object to the array.
you can call this method just after the value of "notification.type" change.