Parent/Child Component

Posted 2 years ago by michaelvolst


I know have a department component which hold all the departments with the tasks associated with it.

Currently I am filtering with a computed property on the Tasks component when they are done, but now I would like to put a class on the parent component (department) on the div.list an extra class for when every task is done.

I would like to know how I can achieve this, currently I have used v-ref and v-el, but none of them worked for me.

Maybe one of you can help me out with this problem.

@JeffreyWay @jvv


  <div class="content">
    <div class="list" v-for="department in departments">
      <img class="person" :src="'/uploads/users/' + department.user.avatar" alt="{{}}"/>
      <h2>{{ }}</h2>
      <div class="subtitle">
        <span class="location">
          <i class="fa fa-user" aria-hidden="true"></i>
          {{ }}
      <tasks :tasks="department.tasks"></tasks>

  import Tasks from './Tasks.vue';
  export default {
    name: "Departments",

    props: ['departments'],

    components: { Tasks }



  <ul :class="{ 'finished': !isListDone.length}">
    <li v-for="task in tasks">
      <task :task="task"></task>

import _ from 'lodash';
import Task from './Task.vue';

export default {
  name: 'Tasks',

  props: ['tasks'],

  components: { Task },

  computed: {
      return _.filter(this.tasks, (task) => {
        return !task.done


<style scoped>
  .finished > li{
    opacity: .5

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.