Vuejs append data-attribute conditionally

Question

I try to add conditionally a data attribute value to my vue list on loop and I try the following

<ul data-parent="{{model.parent_id !== null ? model.parent_id : 0}}"></ul>

but in this case the list do not renders anymore, if dump out outside html tag {{model.parent_id !== null ? model.parent_id : 0}} than I see the correct output

Does this answer your question? VueJS conditionally add an attribute for an element — Jouni Kantola
– Jouni Kantola, Commented Jul 26, 2023 at 22:34

Georgi Antonov · Accepted Answer · 2017-09-14 11:28:59Z

8

Use : before that and I would create a computed property like this.

computed: {
     parentId() {
       if (this.model.parent_id !== null)
          return this.model.parent_id
       return 0;
     }

}

<ul :data-parent="parentId"></ul>

answered Sep 14, 2017 at 11:28

Georgi Antonov

1,6611 gold badge23 silver badges45 bronze badges

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

Comments

Yul94 · Accepted Answer · 2018-04-13 17:19:32Z

4

The right Syntax

<ul :data-parent="{{(model.parent_id !== null) ? model.parent_id : 0}}"></ul>

answered Apr 13, 2018 at 17:19

Yul94

533 bronze badges

Collectives™ on Stack Overflow

Vuejs append data-attribute conditionally

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related