Data Access to other components

I have uploaded my project to a sandbox here Project Sandbox

i Have added this to my home file but i need it to open/update when i click a link inside another componet "<projectList.vue> " and to close when i click the X in the <projectDrawer.vue> componet. any help would be great im a newb.

<HOME.vue>

<template>
<projectDrawer
      :style="{
        transform: drawerVisible ? 'none' : 'translate3d(100%, 0, 0)',
      }"
    />
</template>

<script>
import projectDrawer from "@/components/projectDrawer.vue";

export default {
data() {
    return {
      drawerVisible: false,
    };
  },
}
</script>

<projectList.vue>

<template>
 <a class="pj" @click="drawerVisible = true">
</template>

<projectDrawer.vue>

<template>
<span
        class="drawer__close closer"
        :style="{
          transform: drawerVisible ? 'translate3d(100%, 0, 0)' : 'none',
        }"
        @click="drawerVisible = false"
      > X </span>
</template>

If I understand the question correctly,…

  • Parent Component: HOME.vue
  • Child Component: proejctList.vue, proejctDrawer.vue

In first, you need to define data to communicate with components.

Parent => Child (props)

  • HOME.vue => projectDrawer.vue : drawerVisible

Child => Parent (custom event)

  • projectDrawer.vue => HOME.vue : Whether a close event has occurred
  • projectList.vue => HOME.vue : Whether a click link event has occurred

and then You can create a one-way data flow using custom events and props.

[props] (Props — Vue.js)
[custom-event] (Custom Events — Vue.js)