Vue js v-model inside a bootstrap popover content

Vue js v-model inside a bootstrap popover content

本文关键字：bootstrap popover content inside js v-model Vue      更新时间：2023-09-26

我试图让带有 v 模型的输入在引导弹出窗口中工作。当前结果是未绑定的输入。请注意，那里正在正确评估胡须。下面是一个代码示例：

.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>

现在进入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()
    }
  })
})

这里有一个小jsbin http://jsbin.com/fadexaxoku/1/edit?html,js,output

尝试这个保留引用的。

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')
  })
});

我们正在绑定事件以添加"隐藏"类，因为我们正在显示真实元素，因此我们需要手动执行此操作，但它有效。

实时代码 ：

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>

相关文章：