How to get more then one class in vue

Question

I'm trying to get more then one class to show depending on what happens. For example if the user clicks on complete then my list is sorted to all the completed items, but what I would also like is that if a user clicks the done button then that item is hidden.

I did try this

<tr v-for="item in filteredItems" :class="[filteredItems.value, hide:item.pending]">

but that didn't work.

Here is my code

    <template>
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <ul class="list-group">
          <li class="list-group-item" @click="setFilter('incomplete')">Not Complete</li>
                            <li class="list-group-item" @click="setFilter('complete')">Completed</li>
                        </ul>
                    </div>

                    <div class="col-md-9">
                        <table class="table table-striped table-sm mt-2">
                            <thead>
                                <tr>
                                    <th>Description</th>
                                    <th> </th>
                                </tr>

                            </thead>

                            <tbody>
                               <tr v-for="item in filteredItems" :class="filteredItems.value">
                                  <td>
                                    {{ item.title }}
                                  </td>

                                  <td>
                                      <button type="button" class="btn btn-success btn-sm" @click="$set(item, 'pending', !item.pending)">Success</button>
                                  </td>
                                </tr>


                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <script>
        export default {
            data: function() {
                return {
                  filter: 'all',
                  items: [{
                        id: '1',
                      title: 'Task 1',
                      value: "pending"
                    },
                    {
                        id: '2',
                      title: 'Task 2',
                      value: "complete"
                    },
                    {
                        id: '3',
                      title: 'Task 3',
                      value: "complete"
                    },
                    {
                        id: '4',
                      title: 'Task 4',
                      value: "pending"
                    }
                  ],
                  pending: undefined
                }
              },

              computed: {
                filteredItems() {
                  if (this.filter === 'all') return this.items;
                  else return this.items.filter(item => item.value === this.filter);
                }
              },

              methods: {
                setFilter: function(filter) {
                  this.filter = filter;
                },

                setComplete: function(id){
                    // console.log('setComplete - '+id);
                    if(id)
                    {
                        // console.log(id);

                    }
                }
              }
        }
    </script>

<style>
    .hide{
        display: none;
    }
</style>

Answer 1

You're very close. Use Object syntax instead of Array syntax in the inline binding.

<tr v-for="item in filteredItems" :class="{myClass: filteredItems.value, hide: item.pending}">

Documentation: https://v2.vuejs.org/v2/guide/class-and-style.html