Question

我试图通过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

Answer 1

试试这个坚持参考的那个。

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

我们绑定事件以添加＆＃39;隐藏＆＃39;因为我们正在显示真正的元素，所以我们需要手动完成它，但它可以工作。

直播代码：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Vue js v-model在bootstrap popover内容中

1 个答案: