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](https://stackoverflow.com/questions/42874314/vuejs-conditionally-add-an-attribute-for-an-element) — Jouni Kantola, Jul 26 '23 at 22:34

score 7 · Accepted Answer · answered Sep 14 '17 at 11:28

7

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 '17 at 11:28

Georgi Antonov

1,581
21
40

score 4 · Answer 2 · answered Apr 13 '18 at 17:19

4

The right Syntax

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

answered Apr 13 '18 at 17:19

Yul94

53
3

Vuejs append data-attribute conditionally

2 Answers2