如何将弹出框内的输入标签绑定到 Vue 模型
Posted
技术标签:
【中文标题】如何将弹出框内的输入标签绑定到 Vue 模型【英文标题】：How to bind an input tag inside a popover to Vue Model 【发布时间】：2018-01-06 00:49:37 【问题描述】：我在弹出框内容中有一个input，如下所示：
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>
这里是 JS：
new Vue(
el: '#vue-app',
data:
message: 'I am a Text'
);
$(document).ready(function()
$('[data-toggle="popover"]').popover();
);
您可以看到data-content 的输入绑定得很好，但里面的那个没有绑定！
任何想法将不胜感激。
【问题讨论】：
【参考方案1】：您可以简单地使用这个组件，它不会破坏弹出的元素https://www.npmjs.com/package/@soldeplata/popper-vue
【讨论】：
【参考方案2】：我找到了一个有用的 Vue 包(vue-popper)。
不使用 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>
干杯！
【讨论】：
这个更好npmjs.com/package/@soldeplata/popper-vue【参考方案3】：Vue 不能只知道你动态创建的 html 元素，因此你创建的输入元素不能被绑定。如果你真的想这样解决，我觉得render函数可以帮到你：https://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 类进行样式化
【讨论】：
【参考方案4】：你可以这样使用：
这是工作演示：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/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')
)
);
【讨论】：
不错的一个！只是一个小建议，您可以从弹出框 html 中删除data-html="true"，因为在 JS 中您已经指定了 html:true 。
你可以在你的代码中从js中删除html:true。
这不是最优雅的解决方案，因为您在这里混合了两个库（Vue 和 Jquery）。 Vue 本身可以用更少的代码自行处理（使用 v-if）以上是关于如何将弹出框内的输入标签绑定到 Vue 模型的主要内容，如果未能解决你的问题，请参考以下文章