I have two components SingleTaskItem and ControlArea. ControlArea has a collapse button and when that button is clicked I want to call a function in SingleTaskItem. Here is my code so far. Can you please tell me what am I doing wrong?

SingleTaskItem:
<template>
  <div class="SingleTaskItem">
  <ControlArea v-bind:collapsed="collapsed" 
         v-bind:onClickCollapse="onClickCollapse"/>
 </div>
</template>

<script>
export default {
  name: "SingleTaskItem",
  data() {
    return {
      collapsed: false
    };
  },
  methods: {
    onClickCollapse(value) {
      console.log("on Click Collapse called");
      this.collapsed = value;
    }
  }
};
</script>

ControlArea:

<template>
  <div class="ControlArea">
    <div class="action-btn edit">
      <i class="fas fa-ellipsis-h"></i>
    </div>
    <div class="action-btn collapsible">
      <i v-if="collapsed" v-on:click="uncollapse" class="fas fa-chevron-down"></i>
      <i v-else v-on:click="collapse" class="fas fa-chevron-up"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "ControlArea",
  props: {
    collapsed: Boolean
  },
  methods: {
    collapse(event) {
      console.log("collapse function is called");
      this.$emit("onClickCollapse", "true");
    },
    uncollapse(event) {
      this.$emit("onClickCollapse", "false");
    }
  }
};
</script>

1 Answers

0
David Padrick On Best Solutions

Instead of v-bind:onClickCollapse="onClickCollapse" you should use v-on:onClickCollapse. This is kind of easy to miss because you used the word 'on' in your event name - it might be clearer to remove that.

Also, to pass that true/false string you need to pass $event into your function call: v-on:onClickCollapse($event). To clean this up you should probably also pass true/false booleans rather than strings.