[英]How to bind an input tag inside a popover to Vue Model
我在彈出框內容中有一個input ，如下所示：
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>
這是 JS：
new Vue({
el: '#vue-app',
data: {
message: 'I am a Text'
}
});
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
如您所見， data-content的輸入綁定得很好，但里面的輸入沒有綁定！
任何想法將不勝感激。
你可以這樣使用：
這是工作演示： https ://output.jsbin.com/mokoka
https://jsbin.com/mokoka/edit?html,js,輸出
<!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/vue@2.4.2"></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 不能只知道你動態創建的 html 元素，因此你創建的輸入元素不能被綁定。 如果你真的想這樣解決，我認為渲染函數可以幫助你： https ://v2.vuejs.org/v2/guide/render-function.html
但是，更優雅的解決方案（恕我直言）是創建基本的 Vue v-if 函數
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
}
});
只需應用引導 css 類進行樣式設置
我找到了一個有用的 Vue 包（ vue-popper ）。
它在不使用 Bootstrap 的情況下做同樣的事情！
<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>
干杯!
您可以簡單地使用這個組件，它不會破壞彈出的元素https://www.npmjs.com/package/@soldeplata/popper-vue
vue.js - 如何綁定只讀輸入字段？ v-bind:value 還是 v-model？
[英]vue.js - how to bind read only input fields? v-bind:value or v-model?
如何使用輸入字段替換文本中的占位符，並使用Vue.js將它們與v-model綁定
[英]How to replace a placeholders from a text with input fields and bind them with v-model with Vue.js
如何 Vue 讓輸入值 v-model 與 v-bind:value 操作
[英]How to Vue let input value v-model with v-bind:value operation
Vuejs 單文件組件（.vue）里面的模型更新<script> tag
[英]Vuejs single file component (.vue) model update inside the <script> tag
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.