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('child-component', {
  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 "http://laurenmessiah.com/wp-content/uploads/2012/06/mary-kate-and-ashley-olsen-sex-trafficking-scandal.jpg"
			}
			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">She's feel'n {{ status }} ...</h3>
					<img :src="image" class="w-full rounded-lg mb-4" style="height:200px">
					<div class="border px-4 py-3">
						<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="reallyBad"
								v-on:change="setStatus">	
								Really Bad
					</div>
					<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 == 'reallyBad') {
				return "http://31.media.tumblr.com/a302a1906f0ad232710143b430a737d6/tumblr_melv4lo8bg1rrvlcmo1_500.gif"
			}
		
			return...