Cacher is the code snippet organizer for pro developers

<template id="template-connect">
	<div class="connect">
		<div class="connect__searchPanel">
			<div class="connect_speciesSelect">
				<button @click="handleDogs">Dogs</button>
				<button @click="handleCats">Cats</button>
			</div>

			<div class="connect_Search">
				<input type="text"
					   :placeholder="searchPlaceholder">
					   
				{{ species }}
			</div>
		</div>		
	</div>
</template>

<script>
(function() {
	"use strict"

	Vue.component("vue-connect", {
		template: "#template-connect",
		
		data: function() {
			return {
				species: "dogs"
			}
		},
		
		computed: {
			searchPlaceholder: function() {
				var self = this
				return self.species + " is computed.." 
			}
		},
		
		methods: {
			handleDogs: function() {
				//alert('dogs...')
				var self = this
				self.species = 'dog'
			},
			handleCats: function() {
				//alert('cats...')
				var self = this
				self.species = 'cat'
				
			}
		},
		
	})

})()

</script>

<style>
	.connect__searchPanel {
		margin-bottom: 2em;
		padding: 0.75em 0.5em;
		border: 3px solid #1a1a1a;
		border-radius: 6px;
	}
	
	.connect_speciesSelect {
		margin-bottom: 0.5em;
	}
	
</style>