CODEWITHSUNDEEP
javascripttwitter-bootstrapvue.js
Riad H
Riad H

Reputation: 29

Vue js v-model inside a bootstrap popover content

I'm stuck trying to get an input with a v-model to work inside a bootstrap popover. The current result is an unbound input. Note that mustaches are being correctly evaluated there. Here is a code sample:

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://vuejs.org/js/vue.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
This is the expected result
<br>
{{ message }} : 
<input type="text" v-model="message" placeholder="edit me">

<hr>
This is the bootstrap result:<br>
<button type="button" class="btn btn-danger" data-toggle="popover" title="Popover title" data-content="" data-placement="right auto">Click to toggle popover</button>
<div class="hide popper-content">{{ message }} : 
<input type="text" v-model="message"></div>
</body>
</html>

Now onto js:

new Vue({
  el: 'body',
  data: {
    message: 'Hello Vue.js!'
  }
})

$(function () {
  $('[data-toggle="popover"]').popover({
    html: true,
    content: function () {
      return $(this).next('.popper-content').html()
    }
  })
})

And here is a little jsbin http://jsbin.com/fadexaxoku/1/edit?html,js,output

Upvotes: 2

Views: 8800

Answers (1)

Hardik Satasiya
Hardik Satasiya

Reputation: 9693

try this one which persist the reference.

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
 }
})

$('[data-toggle="popover"]').popover({
    html: true,
    content: $('#popper-content')
  }).on('show.bs.popover', function() {
    $('#popper-content').addClass('show')
  }).on('hide.bs.popover', function() {
    $('#popper-content').addClass('hide')
  })
});

we are binding event to add 'hide' class as we are showing real element so we need to do it manually but it works.

live code :

http://jsbin.com/dajucowuqi/1/edit?html,js,output

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

$(function () {
  $('[data-toggle="popover"]').popover({
    html: true,
    content: $('#popper-content')
  }).on('show.bs.popover', function() {
    $('#popper-content').addClass('show')
  }).on('hide.bs.popover', function() {
    $('#popper-content').addClass('hide')
  })
})
<!DOCTYPE html>
<html>
<head>
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="app">
      {{ message }} : 
      <input type="text" v-model="message" placeholder="edit me">
      <br>     
      <button type="button" class="btn btn-danger" data-toggle="popover" title="Popover title" data-content="" data-placement="right auto">Click to toggle popover</button>
      <div id="popper-content" class="hide popper-content">{{ message }} : 
        <input type="text" v-model="message">
      </div>
  </div>
  </body>
</html>

Upvotes: 2

Related Questions