草庐IT

javascript - Vue.js v-html contenteditable 防止 dom 刷新以防止光标/插入符跳转

coder 2024-05-07 原文

作为引用,我使用的是 Vue 2.0、Vuex 和 Firebase。

我正在构建一个 contenteditable 组件,使用 v-html 绑定(bind)来呈现 innerHTML。数据在 KeyUp 上更新。每当数据更新时,DOM 元素都会用"new"数据刷新,导致插入符号/光标跳回到内容可编辑的 div 的开头。

我研究了 Rangy 和其他一些 stackoverflow 解决方案,但我觉得最简单的解决方案是从数据刷新中解除绑定(bind) DOM 元素。我希望数据仍然在 firebase 中更新,但不会导致元素刷新。

有没有办法让我仍然使用 v-html 但阻止 DOM 元素随数据刷新?还是有另一种方法可以在不自动绑定(bind)的情况下呈现 HTML?

编辑:2016 年 11 月 18 日

所以我一直在努力解决这个问题。这是我目前的想法。

  1. 使用 lifecycle hook并停止组件重新渲染。我查看了 Vue 文档,但似乎无法找到停止循环的方法。
  2. 使用像 React’s “componentShouldRender” 这样的东西.同样,看起来 Vue.js 在生命周期中没有类似的方法。

如果有人知道结束生命周期、停止重新渲染或从 vue 中获取 React 的“componentShouldRender”功能的任何方法,那应该足以解决此问题。

-

更新:2016 年 11 月 29 日

这次更新有点晚了。我已经记录了 feature request在 Github 上使用 Vue。

问题讨论中有一些 JSFiddle 可以提供 potential solution .但是,我认为没有一个可以作为完整的解决方案。唯一有希望的最近产生了more issues .

如果添加 componentShouldRender 生命周期 Hook ,所有这些问题都不是问题。我会继续寻找完整的解决方案

最佳答案

Is there a way for me to still use v-html but prevent the DOM element from refreshing with the data?

是的。 v-once 指令就是这样做的。

https://v2.vuejs.org/v2/api/#v-once

关于javascript - Vue.js v-html contenteditable 防止 dom 刷新以防止光标/插入符跳转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40666774/

有关javascript - Vue.js v-html contenteditable 防止 dom 刷新以防止光标/插入符跳转的更多相关文章

  1. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  2. ruby-on-rails - Rails 3.2 防止使用错误保存对象 - 2

    我有一个ActiveRecord对象,我想在不对模型进行永久验证的情况下阻止它被保存。您过去可以使用errors.add执行类似的操作,但它看起来不再有效了。user=User.lastuser.errors.add:name,"namedoesn'trhymewithorange"user.valid?#=>trueuser.save#=>true或user=User.lastuser.errors.add:base,"myuniqueerror"user.valid?#=>trueuser.save#=>true如何在不修改用户对象模型的情况下防止将用户对象保存在Rails3.2中

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby - 防止SQL注入(inject)/好的Ruby方法 - 2

    Ruby中防止SQL注入(inject)的好方法是什么? 最佳答案 直接使用ruby?使用准备好的语句:require'mysql'db=Mysql.new('localhost','user','password','database')statement=db.prepare"SELECT*FROMtableWHEREfield=?"statement.execute'value'statement.fetchstatement.close 关于ruby-防止SQL注入(inject

  5. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接,但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  6. (附源码)vue3.0+.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍  介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。  内容有:    ①:Hub模型的方法介绍    ②:服务器端代码介绍    ③:前端vue3安装并调用后端方法    ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke()  去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on

  7. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的? 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map,但任何事情都可能发生)首先要知道的是,这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  8. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss? - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中,html表单使用tinymce将“content”列设置为textarea字段。在首页,因为使用了tinymce,post.html.erb的代码需要用这样的原始方法来实现。.好的,现在如果我关闭浏览器javascript,这个文本区域可以在没有tinymce的情况下输入,也许用户会输入任何xss,比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中,但sanitize方法将相互过滤tinymce样式。例如

  9. ruby-on-rails - 如何防止错误 "code converter not found (UTF-8)"? - 2

    我在生产环境(CentOS5.6)中遇到此错误,但在开发环境(Ubuntu11.04)中运行良好。在这两种环境中,该应用程序都使用Ruby1.9.3和Rails3.0.9,并由passenger和nginx提供服务。我的Mechanizegem版本是2.3。未找到代码转换器(UTF-8)此代码的最后一行触发它:mech=Mechanize.newpage=mech.get("http://myurl.com/login.php?login_name=a&password=b")form=page.form_with(:name=>"loginForm")form.field_with(

  10. ruby - Watir 无法找到我在 Chrome 的 DOM 检查器中看到的元素 - 2

    这是一个研究案例:......我正在尝试使用WatirRuby的API引用名为“bar”的嵌入元素。该元素由Chrome的DOM检查器显示,但我无法使用Watir的任何查找方法找到它:browser.embeds()#onlyisfoundbrowser.html.include?'bar'#=>false为什么会这样?为什么Watir不显示完整的HTML?如果我有不同框架中的元素或由Javascript初始化函数动态插入的元素,是否可以使用Watir访问它们?谢谢 最佳答案 如果元素在框架中,你必须使用这样的东西:browser.

随机推荐