Dynamically add css class to span tag when text is set to "Completed" with Vue.js

user_2412603 0
Viewed 395

I have list of files ready to be uploaded with status "Waiting":

<ul class="list-group">
<li class="list-group-item" v-for="file in uploadedFiles">
    {{ file.fileName }}
    <span class="badge">{{file.uploadStatus}}</span>
    </li></ul>

when the upload status of the file changes to "Completed" i want to dynamically add class "badge-success" to span tag. I Looked vue documentation and tried with adding this to span tag:

<span class="badge" v-bind:class="'badge-success': file.uploadStatus == 'Completed'">{{file.uploadStatus}}</span>

I even tried some other combinations (changed text, new data property), but to no avail.

So how can i add another class to span tag when the upload status text of a file is changed? Any tip would be greatly appreciated.

vue.js class css
1 Answers

From Vue documentation:

We can pass an object to v-bind:class to dynamically toggle classes

So, you have to do it like:

<span
  class="badge"
  v-bind:class="{'badge-success': file.uploadStatus == 'Completed'}"
>
  {{file.uploadStatus}}
</span>
user_150255080
Related