Passing in a prop and setting it as data

Question

I'm trying to pass a prop from my drop down button component:

<template>
    <div>
        <p @click="toggleActive">Open Drop Down</p>
        <drop-down :active="this.active"></drop-down>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                active: false,
            }
        },
        methods: {
            toggleActive() {
                return this.active = ! this.active;
            }
        }
    }
</script>

To my drop down component:

<template>
    <div class="drop-down" v-if="this.passedActive">
        <p @click="toggleActive">Close drop down</p>
            ....

<script>
    export default {
        props: ['active'],
        data() {
            return {
                passedActive: this.active,
            }
        },
        methods: {
            toggleActive() {
           
                return this.passedActive = ! this.passedActive;
            }
        }
    }
</script>

The idea is that I can activate the drop down component from it's parent, and then inside the drop down component I can modify this prop and deactivate the drop down - as if someone is pressing an 'x' inside the component.

I've checked the docs and this does appear to be the correct way to do it, but for some reason it's not working.

Answer 1

The code below works. As noted in the comments under your question, passedActive is initialized once. The parent controls the initial state (only), and the child itself controls any subsequent state. If you start with it false, it never gets to become true, because the controller is never displayed.

That is a design flaw: there should be one data item that controls it, not two. The child component should rely on its prop, and its toggle function should emit an event that the parent handles.

new Vue({
  el: '#app',
  data: {
    active: true
  },
  methods: {
    toggleActive() {
      console.log("Toggling");
      this.active = !this.active;
    }
  },
  components: {
    dropDown: {
      props: ['active'],
      data() {
        return {
          passedActive: this.active,
        }
      },
      methods: {
        toggleActive() {
          return this.passedActive = !this.passedActive;
        }
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <p @click="toggleActive">Open Drop Down {{active}}</p>
  <drop-down :active="active" inline-template>
    <div class="drop-down" v-if="this.passedActive">
      <p @click="toggleActive">Close drop down</p>
    </div>
  </drop-down>
</div>