JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<div id="app">
    <app :counter="counter" />
  </div>

JavaScript

let HelloWorld = {
  name: 'HelloWorld',
  props: {
    msg: String,
    counter: Number,
  },
  template: `<div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      Here lies all of our operations for automating some strenuous tasks. <br>
    </p>
    <h3>Get Started {{ counter }}</h3>
    <ul>
    <li><a v-on:click="updateCounter()" class="generateRollup">Generate Purchase Price</a></li>
    </ul>
  </div>`
}

let App = {
  name: 'app',
  props: ['counter'] ,
  components: {
    HelloWorld
  },
  template: '<div id="app"><img alt="logo" src="./assets/logo.png"><h1>{{counter}} test</h1><HelloWorld msg="Our Message" :counter="counter"/></div>'
}

Vue.config.productionTip = false

new Vue({

  components: {App},
  data: function(){
  return{
    counter: 10
}
  },
  template: '<app v-bind:counter="counter" />',
  //computed: {
  //  counterInc: function () {
  //    return this.counter++
  //  }
  //},
  methods: {
    updateCounter (x) {
      this.counter = x
    }
  },

  //render: h => h(this)
}).$mount('#app')