JSFiddle - React, Tailwind, and code Playground

by Chris Bao

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="demo">
  <service :service-name="serviceName" v-ref:testcomp v-if="runTest"></service>
</div>

JavaScript

Vue.component('service', {
  template: '<div>' +
    '<div>{{serviceName}}</div>' +
    '<input v-model="serviceName">' +
    '<button @click="test">Test</button>'+
    '</div>',
  props: ['serviceName'],
  methods: {
  	test() {
    	console.log('debuggings...');
    },
  },
})

var demo = new Vue({
  el: '#demo',
  data: {
    allData: {
      serviceName: 'Service1',
      serviceType: '0',
      otherInfo: 'xxxinfo',
    },
    runTest: false,
  },
  computed: {
    serviceName: {
      get: function() {
        return this.allData.serviceName
      },
      set: function(newVal) {
        this.allData.serviceName = newVal;
      }
    }
  },
  methods: {
  	init() {
    	this.runTest = true;
    },
  },
  ready() {
  	this.init();
  },
  watch: {
  	runTest() {
    	if(this.runTest)  {
      	console.log('1');
      	this.$refs.testcomp.test();
        console.log('2');
      }
    },
  },
})