michaelvolst
3 years ago
9
6
Vue

Parent/Child Component

Posted 3 years ago by michaelvolst

Heey,

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

department.vue

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

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

    props: ['departments'],

    components: { Tasks }

  }
</script>

tasks.vue

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

<script>
import _ from 'lodash';
import Task from './Task.vue';

export default {
  name: 'Tasks',

  props: ['tasks'],

  components: { Task },

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

}
</script>

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

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