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: <i>{{message}}</i>
  </div>
  <div>
  <input type="text" class="form-control" v-model="message">
  </div>
  <hr/>
    <a href="#" 
       id="example" 
       class="btn btn-primary" 
       rel="popover"
       data-original-title="Change Message"
       data-content='
       <div class="form-group">
        <label for="exampleInputPassword1">New Message</label>
        <input type="text" class="form-control" v-model="message">
       </div>
       
       <button onclick="hide()" class="btn btn-success button1">one</button>
       <button onclick="hide()" class="btn btn-success button2">two</button>
       '>Change Message</a>
</div>

CSS

#app {
  margin: 100px;
}

JavaScript

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