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</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 @click="changeText()" class="btn btn-success">Submit</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('nn');
    }
  }
});

$(function () {
    $('#example').popover({html: true});
});