CODEWITHSUNDEEP
vue.js
Bryant Tang
Bryant Tang

Reputation: 251

Mustache with condition display HTML attributes?

Is it possible to display HTML attributes in Vue mustache?

{{ (data.status)? "<div>Active</div>" : "<div>InActive</div>"}}

Upvotes: 2

Views: 1140

Answers (2)

Phil
Phil

Reputation: 164897

You cannot add HTML within a mustache expression. It causes the expression to not be evaluated.

https://jsfiddle.net/0zaknb56/

What you can do is use the v-html directive

<div v-html="data.status ? `<div>Active</div>` : `<div>Inactive</div>`">
</div>

https://jsfiddle.net/7h6osyt9/

Upvotes: 4

bli07
bli07

Reputation: 673

You can use the v-if directive in your case.

<div v-if="data.status">Active</div>
<div v-else>Inctive</div>

Upvotes: 4

Related Questions