Bootstrap 3.0 Popover Sample

by Edward Tanguay

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div id="app">
  <div>
    Message: {{message}}
  </div>
  <div>
  <button @click="changeText()">outside works</button>
  </div>
  <hr/>
    <a href="#" 
       id="example" 
       class="btn btn-primary" 
       rel="popover"
       data-original-title="Test Form"
       data-content='
       <div class="form-group">
        <label for="exampleInputPassword1">Name</label>
        <input type="text" class="form-control">
       </div>
       
       <button onclick="hide()" class="btn btn-success button1">one</button>
       <button onclick="hide()" class="btn btn-success button2">two</button>
       '>Fill out form</a>
</div>

CSS

#app {
  margin: 100px;
}

JavaScript

var vm = new Vue({
	el: '#app',
  data: function() {
  	return {
    	message: 'hello'
    }
  },
  methods: {
  	changeText: function() {
    	alert('test');
    }
  }, 
  mounted: function() {
  var self = this;
  	$('#example').popover({html: true})
    .on('hidden.bs.popover', function(){}).parent().delegate('.button1', 'click', function() {
    	self.changeText()
		});
  }
});