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

Tonie

Does this answer your question? VueJS conditionally add an attribute for an element – Inefficacious

Answer 1

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>

Andriaandriana

Answer 2

The right Syntax

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

Making