The very first Vue.js example

by Md. Atiquzzaman Soikat

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<div id="demo">
     <div class="d-flex flex-column text-md-center">
    <div class="p-2">
       <b-btn data-toggle="popover" id="texas" variant="primary" @click="onOpen">Texas</b-btn>
       <br/>
       <br/>
       <b-btn id="california" variant="primary" @click="onOpen">California</b-btn>
    </div>
    <b-popover ref="popover" :show.sync="show" :target.sync="id" title="Popover">
      Hello <strong>{{id}}</strong>
    </b-popover>
  </div>
   <div class="p-2">
      <b-btn class="px-1" @click="onOpen">Open</b-btn>
      <b-btn class="px-1" @click="onClose">Close</b-btn>
    </div>
</div>

JavaScript

var data = {
    message: 'Hello Vue.js!',
    id: 'california',
    show: false
}

var demo = new Vue({
    el: '#demo',
    data: data,
    methods: {
      onOpen(e) {
      	this.id = e.target.id;
        console.log(this.id);
        setTimeout(()=>{
        	this.show = !this.show;
          console.log(this.$el.querySelector('#texas'));
          //console.log(this.$refs.popover);
          //console.log(this.$root.$emit);
     			this.$root.$emit('bv::popover', this.$el.querySelector('#texas'));   	
        }, 100)
      },
      onClose() {
        this.$refs.popover.$emit('close')
      }
    }
})