Parent Child Events

by gadurp1

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">
<body>
    <div id="app"></div>
</body>

JavaScript

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  data: function() {
		return {
		    status: "good"
		}
  },
	methods: {
	  setStatus() {
				this.$emit('toggle-checkbox', this.status)
		}
	},
	computed: {
			image() {
			if ( this.status == 'good') {
				return "https://www.out.com/sites/out.com/files/2016/01/06/michelletanner.jpg"
			}
			
			if ( this.status == 'bad') {
				return "https://i.gifer.com/Y5mA.gif"
			}
			if ( this.status == 'ofAge') {
				return "https://dz7u9q3vpd4eo.cloudfront.net/wp-content/legacy/posts/f40fe7f7-c2fe-489b-9115-8177d1b77848.jpg"
			}
			if ( this.status == 'ofAge') {
		
			}
			if ( this.status == 'reallyBad') {
				return "https://static2.therichestimages.com/wordpress/wp-content/uploads/2017/05/Screen-Shot-2017-05-31-at-3.52.12-PM.png"
			}
	}
	},
  template: `
			<div>
				<section>
					<h3 class="mb-2">How She Feel'n</h3>
					<img :src="image" class="w-full" style="height:200px">
					<input 
							type="radio" 
							v-model="status" 
							value="good"
							v-on:change="setStatus">
						Good
					<input 
							type="radio" 
							v-model="status" 
							value="bad"
							v-on:change="setStatus">	
							Bad
					<input 
							type="radio" 
							v-model="status" 
							value="ofAge"
							v-on:change="setStatus">	
							Of Age
					<input 
							type="radio" 
							v-model="status" 
							value="reallyBad"
							v-on:change="setStatus">	
							Really Bad
					<br />
				</section>
			</div>
  `
})

new Vue({
el: '#app',
data: {
	checked: false,
	childStatus: "good"
},
computed: {
	parentImage() {
			if ( this.childStatus == 'good') {
				return "https://images-na.ssl-images-amazon.com/images/I/61In5xFvleL._SX342_.jpg"
			}
			
			if ( this.childStatus == 'bad') {
				return "https://media.giphy.com/media/NAnYvSGZMYenS/giphy.gif"
			}
			if ( this.childStatus == 'ofAge') {
				return...