vue.js conditional rendering of an attribute [duplicate]

Question

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.

If you don't want the attribute to exist at all when there is no tooltip, then I would probably not do this in the template, but rather in mounted() or something like that. — Bert
– Bert, Commented Jan 16, 2017 at 17:28
@str not exactly. It's a bit simpler with "required", which is a "boolean attribute". My question concerns "attributes in general". — pilat
– pilat, Commented May 28, 2018 at 7:52
@pilat No, it is exactly the same. While required indeed is a boolean attribute, you can not pass a false value to it. "The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value." The only way to use it is to either have it in the DOM, or don't. — str
– str, Commented May 28, 2018 at 7:59
Well, it looks that no matter what type of attribute it is, it won't be rendered if it's has 'false' passed to it. Exactly what I needed! jsbin.com/lamudoqucu/edit?html,js,output — pilat
– pilat, Commented May 29, 2018 at 9:53

arkadij_ok · Accepted Answer · 2018-05-17 15:51:18Z

33

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

answered May 17, 2018 at 15:51

arkadij_ok

5054 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

str Over a year ago

This answer is the only good and officially recommended way to add an attribute conditionally. To remove the attribute, though, it does not necessarily have to be false, but could also be null or undefined.

Bert · Accepted Answer · 2017-01-16 17:42:20Z

5

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);
    }
}

answered Jan 16, 2017 at 17:42

Bert

82.6k17 gold badges205 silver badges166 bronze badges

2 Comments

Baldráni Over a year ago

Very clean way of doing it

Ryan Taylor Over a year ago

the attribute wouldn't be at all reactive if this.col.col_spec.tooltip changed... and sometimes components don't re-mount eg. if vue-router stays on the same route/page (same components) but goes to a new page (different data/url). Like navigating from #/post/1 to #/post/2.

nikojpapa · Accepted Answer · 2017-06-02 15:59:17Z

3

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".

answered Jun 2, 2017 at 15:59

nikojpapa

6701 gold badge9 silver badges17 bronze badges

Comments

JJPandari · Accepted Answer · 2017-01-17 03:31:24Z

0

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>

answered Jan 17, 2017 at 3:31

JJPandari

3,5221 gold badge19 silver badges25 bronze badges

1 Comment

Capsule Over a year ago

Imho anything that goes against the DRY principle should not be shared.

Collectives™ on Stack Overflow

vue.js conditional rendering of an attribute [duplicate]

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Linked

Related