This question already has answers here:
VueJS conditionally add an attribute for an element
(11 answers)
Closed 4 years ago.
I'd like to learn what is the best way to conditionally render an HTML attribute in Vue.js. For example, add data-toggle="tooltip" if there is a tooltip message for current instance.
The code I have now:
<span
:data-toggle="!!col.col_spec.tooltip ? 'tooltip' : ''"
:title="col.col_spec.tooltip"
>
{{ col.col_spec.title }}
</span>
Though, I don't like the 2nd line much… Even if I use computed property here, I'd prefer not to have data-toggle attribute at all, when there is no tooltip to display.
Very so elegant solution:
<span
:data-toggle="!!col.col_spec.tooltip ? 'tooltip' : false"
:title="col.col_spec.tooltip"
>
{{ col.col_spec.title }}
</span>
Yes, yes, yes, it's just necessary that there is not an empty string, but a Boolean false
Something like:
<span ref="column">
{{ col.col_spec.title }}
</span>
And in Vue:
mounted(){
if (this.col.col_spec.tooltip){
this.$refs.column.setAttribute("data-toggle", this.col.col_spec.tooltip);
}
}
A bit late, but here is my take on it:
HTML:
<span
:data-toggle="tooltip"
:data-original-title="tooltipTitle"
>
{{ tooltipTitle }}
</span>
Vue:
methods: {
tooltipTitle: function() {
var title = this.col.col_spec.title;
if (!!title) return title;
return false;
}
}
This will remove the "data-original-title" attribute if there is none to display, consequently removing the tooltip altogether. You must use "data-original-title" instead of just "title" because Bootstrap will automatically add it once you initialise the "title" attribute, and changing "title" to false will not remove the "data-original-title".
Here's another working but not so elegant solution:
<span v-if="!!col.col_spec.tooltip" data-toggle="tooltip" >
{{ col.col_spec.title }}
</span>
<span v-else >
{{ col.col_spec.title }}
</span>
Related
Im whatching a vue.js course and the presentator use this code for an if/else stament on the vue component.
Please if someone can tell me, to understand a way more better the code, im be appreciative.
<template>
<!-- ? = if // : = else -->
<div :class="[task.reminder ? 'reminder' : '', 'task']">
<h3>{{ task.text }}
<i class="fas fa-times"></i>
</h3>
<p>{{ task.day }}</p>
</div>
</template>
<div :class="[task.reminder ? 'reminder' : '', 'task']">
source: https://v2.vuejs.org/v2/guide/class-and-style.html#Array-Syntax
this line will conditionally add array of class that will be joined by a space . So on the first element of the array, it is a ternary operator which depend on task.reminder value, if it is true or something meet the requirement of the ternary, it will add reminder class or an empty string '' which will not be added to the class, and on the index 1 of the array which is task will be added.
Say for example that your task.reminder is true, the div will be render as below:
<div class="reminder task">
if it is false, it will be render as
<div class="task">
{{ task.text }}
source: https://v2.vuejs.org/v2/guide/syntax.html?redirect=true#Text
this is how we render out a variable from vue into the DOM, wrap with {{ and }}
Can you throw off an example or show how this is done? Is it worth connecting an additional library, or does the Quasar already have such an opportunity, in addition to the visual component?
Just use the computed property for getting data based on pagination.
Example -
getData(){
return this.posts.slice((this.page-1)*this.totalPages,(this.page-1)*this.totalPages+this.totalPages)
}
<q-list bordered separator v-for="(post, index) in getData" :key="index">
<q-item clickable v-ripple>
<q-item-label> {{ post.title }} | {{ index }}</q-item-label>
<q-item-label caption> {{ post.content }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
Codepen - https://codepen.io/Pratik__007/pen/PowpOeL
I have to render some html code based on conditions like:
if (status == 'pending') {
// render <span class='pending'>pending</span>
} else {
// render <span class='complete'>complete</span>
}
I would like a better way to to this.
Is ok to use computed properties to render html ?
If you have a bunch of different statuses, then you can have something like this in the template:
<span v-if="status" :class="status">{{ status }}</span>
The span will be displayed when status is truthy and the class and inner text will be set to the status value.
You may looking for v-if
<span v-if=“status==‘pending’” >....
https://v2.vuejs.org/v2/guide/conditional.html
You can use v-if directive:
<span class='pending' v-if="status === 'pending'">
pending
</span>
<span class='complete' v-else>
complete
</span>
See more details: https://v2.vuejs.org/v2/guide/conditional.html
I am having a v-for loop in my vuejs application. i want each span to have a different class name. For example .spa0, .spa1, .spa3..... How do I do it using index in v-for loop?
I tried something like this:
:class="`spa${index}`"
Some of my code is:
<div>
<span v-for="(t, index) in table_data" :class="`spa${index}`">{{t}}</span>
</div>
I expect each span to have a different class.
If table_data is like this as you stated in the comments:
{
type: 'LDAP',
des: 'LDAP for Demo - Do not edit or delete this App',
api: 'show token',
scim: 'cloud.kapstonellc.com:8082/scim/v2/10VN44ZN',
endis: true,
act: true
}
You should probably iterate over table_data keys instead:
<div>
<span v-for="(key, index) in Object.keys(table_data)" :class="`spa${index}`">
{{ table_data[key] }}
</span>
</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.