正文 

当前位置： 首页 > 知识 >

如何将弹出框内的输入标签绑定到 Vue 模型

     2023-02-22     203

关键词：

【中文标题】如何将弹出框内的输入标签绑定到 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）

从弹出框内的按钮更改视图

】从弹出框内的按钮更改视图【英文标题】：ChangingtheViewfromabuttonwithinaPopover【发布时间】：2011-09-0917:30:59【问题描述】：我最初有一个标签栏来更改我的应用程序中的视图。但是现在我已经摆脱了标签栏，并有了一个带有菜单... 查看详情

用jquery如何点击button按钮调用后台方法查询数据返回到弹出框内

1、新建一个html文件，命名为test.html，用于讲解如何用jquery实现点击按钮文本框内的文字加粗。2、在test.html文件内，使用input标签创建一个文本框，用于文字的输入。3、在test.html文件内，设置input标签的id为testid，主要用于下面... 查看详情

弹出框内的按钮不起作用

】弹出框内的按钮不起作用【英文标题】：Buttonwithinpopovernotworking【发布时间】：2011-11-2112:46:46【问题描述】：对不起。刚刚点击。我在最后释放了按钮。好的，我的第一个iPad应用程序几乎完成了，一切看起来都很好，除了........ 查看详情

弹出框内的 UITableView 宽度

】弹出框内的UITableView宽度【英文标题】：UITableViewwidthwheninsideapopover【发布时间】：2010-10-2719:11:32【问题描述】：见下文-tableView单元格被切断。为什么这不起作用？弹出框的宽度为240。（在UITableViewController的子类中）-(void)viewDid... 查看详情

弹出框内的iOS 7 UITableView

】弹出框内的iOS7UITableView【英文标题】：iOS7UITableViewinsideapopover【发布时间】：2013-12-0207:42:53【问题描述】：我有一个UITableView，它有一些自定义样式。此表格视图出现在应用程序的两个位置，其中一个位于UIPopoverController内。但... 查看详情

Bootstrap弹出框内的断线

】Bootstrap弹出框内的断线【英文标题】：BreakinglineinsideBootstrappopover【发布时间】：2018-09-2707:36:58【问题描述】：我正在使用&amp;#013;在引导弹出窗口data-content属性内换行，但它不起作用。这怎么可能？也可以在里面做一些加粗... 查看详情

bootstrap：弹出框内的图像超出了窗口大小

】bootstrap：弹出框内的图像超出了窗口大小【英文标题】：bootstrap:Imageinsidethepopoverisextendingbeyondthewindowsize【发布时间】：2015-01-1008:31:34【问题描述】：我目前正在使用Bootstrap3弹出框功能来显示单击按钮时的图例图例是一个图像... 查看详情

弹出框内的 UISearchDisplayController - 取消搜索时动画效果不佳

】弹出框内的UISearchDisplayController-取消搜索时动画效果不佳【英文标题】：UISearchDisplayControllerinsidepopover-badanimationoncancellingsearch【发布时间】：2011-05-1420:35:24【问题描述】：我的iPad应用程序使用弹出框来执行一些搜索。搜索结果... 查看详情

Twitter Bootstrap 弹出框内的 HTML

】TwitterBootstrap弹出框内的HTML【英文标题】：HTMLinsideTwitterBootstrappopover【发布时间】：2012-10-2313:21:34【问题描述】：我试图在引导弹出窗口中显示HTML，但不知何故它不起作用。我在这里找到了一些答案，但它对我不起作用。如果... 查看详情

将弹出框添加到以编程方式添加的 UIBarButtonItem 并将图像添加到相同的弹出框 Swift

】将弹出框添加到以编程方式添加的UIBarButtonItem并将图像添加到相同的弹出框Swift【英文标题】：addingpopovertoprogrammaticallyaddedUIBarButtonItemandaddingimagestothesamepopoverSwift【发布时间】：2015-09-1112:55:58【问题描述】：从过去几天开始，... 查看详情

将弹出框添加到当前导航控制器层次结构

】将弹出框添加到当前导航控制器层次结构【英文标题】：AddingPopovertocurrentNavigationControllerhierarchy【发布时间】：2013-08-2220:03:46【问题描述】：我在这里看到了很多关于将UINavigationBar添加到UIPopoverController的问题。我见过的所有... 查看详情

如何将弹出框放置在突出显示的文本部分上？

】如何将弹出框放置在突出显示的文本部分上？【英文标题】：Howtopositionpopoveroverahighlightedportionoftext?【发布时间】：2015-03-3013:21:10【问题描述】：假设存在正文的这种情况。而且，在突出显示其中的一个单词时，我希望显示一... 查看详情

从引导弹出框内的元素中删除类

】从引导弹出框内的元素中删除类【英文标题】：Removeclassfromelementinsidebootstrappopover【发布时间】：2019-03-0912:36:42【问题描述】：我正在使用引导弹出框来显示收件人列表的可用操作列表。弹出框：<ulclass=\'list-unstyledrecipients-po... 查看详情

如何将输入绑定到 vue.js 模型

】如何将输入绑定到vue.js模型【英文标题】：Howtobindinputtovue.jsmodel【发布时间】：2017-03-2110:35:48【问题描述】：有人可以帮我将输入数据绑定到vue.js模型吗？我有一个fruit对象数组，其中price的值为空。我想将每个fruit对象映射到... 查看详情

在弹出框内滚动 tableview 会创建一个工件

】在弹出框内滚动tableview会创建一个工件【英文标题】：Scrollingatableviewinsideapopovercreatesanartifact【发布时间】：2012-06-1401:48:31【问题描述】：如果您查看标题为“地址”的按钮/标签，您会注意到角落里有一点白色。只有当用户开... 查看详情

如何调试弹出框？

】如何调试弹出框？【英文标题】：Howtodebugapopover?【发布时间】：2012-01-2806:20:46【问题描述】：在这个小提琴http://jsfiddle.net/mjmitche/qVdEy/6/上，您可以看到弹出框内的文本对齐是完美的，但是，当我在我的网站上放置完全相同的c... 查看详情

easyui打开dialog后给弹出框内输入框赋值问题

   在写一个弹出页面的时候，里面有一些输入框，需要在弹出的时候从数据库取值并且赋值，刚开始在弹出的时候使用$(id).val(value)，结果赋值失败，为空当时纠结了一会，然后突然想到在easyui打开dialog后不能设置原... 查看详情

ngRepeat 在 Bootstrap 弹出框内

】ngRepeat在Bootstrap弹出框内【英文标题】：ngRepeatInsideofBootstrapPopover【发布时间】：2014-08-0122:30:14【问题描述】：我一直在网上搜索并绞尽脑汁，但似乎无法找到解决方案。我需要在ng-repeat内制作一个弹出框，其中弹出框内部也... 查看详情