文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

VUE通过JS修改html对象的值导致没有更新到数据中如何解决

2023-07-04 14:58

关注

这篇文章主要介绍了VUE通过JS修改html对象的值导致没有更新到数据中如何解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇VUE通过JS修改html对象的值导致没有更新到数据中如何解决文章都会有所收获,下面我们一起来看看吧。

业务场景

我们在使用vue 编写 代码时,我们有一个 多行文本框控件,希望在页面点击一个按钮 在 文本框焦点位置插入一个 {pk}的数据。

发现插入 这个数据后,这个数据并没有同步到 数据中,但是直接通过键盘输入,就可以改变数据。

原因分析

在通过 JS 修改控件的value 数据后,并没有触发到数据更新。

解决办法

Vue.component('rx-textarea', { props: {  value:[String,Number],  cols: {   type: Number,   default: 60  },  rows: {   type: Number,   default: 4  } }, data() {  return {   curVal:this.value  } }, template: "<div><textarea class='rx-textarea' v-model='curVal' @focus='focus(event)' :cols='cols' :rows='rows' @blur='change(event)' ></textarea></div>", methods:{  change:function(e){   this.$emit('input', e.target.value);  },  focus:function(e){   this.$emit('myfocus', e);  } }, watch: {  curVal: function (val, oldVal){   this.$emit('input', this.curVal);  },  value :function(val,oldVal){   if(val!=oldVal){    this.curVal=this.value;   }  } }})

当文本框获取焦点时,我们发布一个 myfocus 控件,我们在使用这个控件的时候。

<rx-textarea @myfocus="getTextarea" v-model="item.sql"></rx-textarea>

编写一个 getTextarea 的方法。

var curTextarea=null;function getTextarea(e){ curTextarea= e.target;}

这里将文本框控件,抛出来,我们可以通过 js代码修改这个控件的value。

function insertPK(){ $.insertText(curTextarea,"{pk}")}

通过这个代码我们往焦点处插入我们的代码。当文本框失去焦点时,将当前控件的值作为 input 事件进行发布,从而实现了数据的同步。

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

关于“VUE通过JS修改html对象的值导致没有更新到数据中如何解决”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“VUE通过JS修改html对象的值导致没有更新到数据中如何解决”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯