I have an input inside a popover content like so:
JSFiddle
HTML:
<div id="vue-app">
<div class="btn btn-primary" data-toggle="popover" data-placement="bottom" title="Hello World!" data-html="true" data-content='<input v-model="message"/>'>
Click Me!
</div>
<hr>
<input v-model="message"> {{ message }}
</div>
And here is JS :
new Vue({
el: '#vue-app',
data: {
message: 'I am a Text'
}
});
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
As you can see the input out of data-content binds well, but the one inside doesn't bind!
Any idea would be great appreciated.
I have an input inside a popover content like so:
JSFiddle
HTML:
<div id="vue-app">
<div class="btn btn-primary" data-toggle="popover" data-placement="bottom" title="Hello World!" data-html="true" data-content='<input v-model="message"/>'>
Click Me!
</div>
<hr>
<input v-model="message"> {{ message }}
</div>
And here is JS :
new Vue({
el: '#vue-app',
data: {
message: 'I am a Text'
}
});
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
As you can see the input out of data-content binds well, but the one inside doesn't bind!
Any idea would be great appreciated.
Share Improve this question edited Jul 30, 2017 at 11:03 Talha Awan 4,6194 gold badges26 silver badges40 bronze badges asked Jul 30, 2017 at 10:59 Hamed KamravaHamed Kamrava 12.9k34 gold badges92 silver badges128 bronze badges4 Answers
Reset to default 5You can use like this:
Here is the working demo: https://output.jsbin./mokoka
https://jsbin./mokoka/edit?html,js,output
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery./jquery-1.12.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://unpkg./[email protected]"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="vue-app">
<div class="btn btn-primary" data-toggle="popover" data-placement="bottom" title="Hello World!" data-html="true">
Click Me!
</div>
<hr>
<input type="text" v-model="message"> {{ message }}
<div id="popper-content" class="hide popper-content">
<input type="text" v-model="message">
</div>
</div>
</body>
</html>
JavaScript:
new Vue({
el:'#vue-app',
data: {
message: 'I am a Text!'
}
})
$(document).ready(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')
})
});
Vue cannot just know of html-element you dynamically create, hence your created input-element cannot be bound. If you really want to solve it this way, I think the render function can help you: https://v2.vuejs/v2/guide/render-function.html
However, a more elegant solution (imho) is to create the basic Vue v-if function
Html:
<div id="vue-app">
<div class="btn btn-primary" v-on:click="showPop = !showPop">Click Me!</div>
<div class="mypopover" v-if="showPop">
<p>Title</p>
<input v-model="message">
</div>
<hr>
<input v-model="message">
{{ message }}
</div>
Js:
new Vue({
el:'#vue-app',
data: {
message: 'I am a Text',
showPop: false
}
});
Just apply the bootstrap css class for styling
I found a useful Vue Package(vue-popper).
It do the same thing without using Bootstrap!
JSFiddle
<popper trigger="click" :options="{placement: 'bottom'}">
<div class="popper">
<input type="text" v-model="message">
</div>
<div slot="reference" class="btn">
Click Me!
</div>
</popper>
Cheers!
You can simply use this ponent, that does not destroy the popped element https://www.npmjs./package/@soldeplata/popper-vue