Menu
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.
552
To get an input value in Vue, we can use the v-model directive to set up a two-way binding between the value and a variable. Every time the user changes the text in the input field, the text variable will be updated automatically. We can then use this variable to perform an action or display information.
The v-model directive makes two-way binding between a form input and app state very easy to implement. One can bind a form input element and make it change the Vue data property when the content of the field changes.
The v-bind directive instructs Vue to keep the element's id attribute in sync with the component's dynamicId property. If the bound value is null or undefined , then the attribute will be removed from the rendered element.
$v is an object that calls vuelidate (at the time of writing the comment, supported in version Vue.
You can use like this:
Here is the working demo: https://output.jsbin.com/mokoka
https://jsbin.com/mokoka/edit?html,js,output
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/[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.org/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
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
