Ripple events down to components using watch

index.html

<div id="app">
	<button @click="changeAll(true)">
		OPEN ALL THE BOXES
	</button>
	<button @click="changeAll(false)">
		Close ALL THE BOXES
	</button>
	
	<drop-down :override="override">Hello</drop-down>
	<drop-down :override="override">Hello</drop-down>
	<drop-down :override="override">Hello</drop-down>
	<drop-down :override="override">Hello</drop-down>
	<drop-down :override="override">Hello</drop-down>
	<drop-down :override="override">Hello</drop-down>
	<drop-down :override="override">Hello</drop-down>
	<drop-down :override="override">Hello</drop-down>
	<drop-down :override="override">Hello</drop-down>
</div>

ripple-events-down-to-components-using-watch.markdown

Ripple events down to components using watch

A Pen by Tristan Bailey on CodePen.

License.

script.js

const DropDown = {
	name: 'DropDown',
	
	props: ['override'],
	
	template: `<div class="dropdown">
		<h3 @click="toggle">Title</h3>
		<div v-show="isOpen"><slot></slot></div>
	</div>`,
	
	data() {
		return {
			isOpen: false
		}
	},
	
	methods: {
		toggle() {
			this.isOpen = !this.isOpen;
		}
	},
	
	watch: {
		override() {
			this.isOpen = this.override
		}
	}
}

new Vue({
	el: '#app',
	components: {
		DropDown
	},
	
	data: {
		override: false
	},
	
	methods: {
		changeAll(polarity) {
			this.override = polarity
		}
	}
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

style.scss

.dropdown {
	display: block;
	padding: 0.1rem 0.5rem;
	background: #f2f2f2;
	margin: 0 auto 1rem;
	max-width: 50rem;
}
h3 {
	cursor: pointer;
}