JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<div id="app">
  <black-hole>
    <div slot="dragger">
      <input ref="lost" value="lost"/>
    </div>
  </black-hole>
  <br>
  <input ref="safe" value="safe"/>
  <br><br>
  <button @click="whereAreThey">Where are they?</button>
  <pre>{{ console }}</pre>
</div>

JavaScript

const BlackHole = Vue.extend({
	name: 'black-hole',
	template:
  	`<div>
    	<h2>Evil black-hole</h2>
    	<slot name="dragger"></slot>
      <br>
      <hr>
    </div>`
});

new Vue({
	el: '#app',
  data: {
  	console: ''
  },
  components: {
  	BlackHole
  },
  methods: {
  	whereAreThey () {
    	this.log(this.$refs);
    },
    log () {
      this.console = JSON.stringify([this.$refs.safe.value, this.$refs.lost.value]);
    }
  }
});