热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

VUE直接通过JS修改html对象的值导致没有更新到数据中解决方法分析

这篇文章主要介绍了VUE直接通过JS修改html对象的值导致没有更新到数据中解决方法,结合实例形式详细分析了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: "
", 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 控件,我们在使用这个控件的时候。



编写一个 getTextarea 的方法。

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

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

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

通过这个代码我们往焦点处插入我们的代码。

当文本框失去焦点时,将当前控件的值作为 input 事件进行发布,从而实现了数据的同步。

希望本文所述对大家vue.js程序设计有所帮助。


推荐阅读
  • 本文详细记录了腾讯ABS云平台的一次前端开发岗位面试经历,包括面试过程中遇到的JavaScript相关问题、Vue.js等框架的深入探讨以及算法挑战等内容。 ... [详细]
  • PHP 5.2.5 安装与配置指南
    本文详细介绍了 PHP 5.2.5 的安装和配置步骤,帮助开发者解决常见的环境配置问题,特别是上传图片时遇到的错误。通过本教程,您可以顺利搭建并优化 PHP 运行环境。 ... [详细]
  • 本文详细介绍了HTML中标签的使用方法和作用。通过具体示例,解释了如何利用标签为网页中的缩写和简称提供完整解释,并探讨了其在提高可读性和搜索引擎优化方面的优势。 ... [详细]
  • 本文详细介绍了如何通过多种编程语言(如PHP、JSP)实现网站与MySQL数据库的连接,包括创建数据库、表的基本操作,以及数据的读取和写入方法。 ... [详细]
  • Hadoop入门与核心组件详解
    本文详细介绍了Hadoop的基础知识及其核心组件,包括HDFS、MapReduce和YARN。通过本文,读者可以全面了解Hadoop的生态系统及应用场景。 ... [详细]
  • 根据最新发布的《互联网人才趋势报告》,尽管大量IT从业者已转向Python开发,但随着人工智能和大数据领域的迅猛发展,仍存在巨大的人才缺口。本文将详细介绍如何使用Python编写一个简单的爬虫程序,并提供完整的代码示例。 ... [详细]
  • MySQL索引详解与优化
    本文深入探讨了MySQL中的索引机制,包括索引的基本概念、优势与劣势、分类及其实现原理,并详细介绍了索引的使用场景和优化技巧。通过具体示例,帮助读者更好地理解和应用索引以提升数据库性能。 ... [详细]
  • 案例1:在子组件中两个按钮1和-1,点击后修改count整个操作的过程还是在子组件中完成,但是之后的展示交给父组件这样,我 ... [详细]
  • 本文详细介绍了如何使用JavaScript实现数据的双向绑定,包括MVVM架构的基本概念、不同框架下的实现方式以及具体的代码示例。 ... [详细]
  • vue 如何将输入框的输入自动小写转大写(使用 vmodel 时采取另一种方式)
    前言:小写转大写,可以用过滤器实现,但当使用v-model时就不行了,这里有解决方案。转载请注明出处:http ... [详细]
  • 本文详细介绍了如何在Vue应用中利用Vuex的Mutations来更新和管理购物车的数据,包括添加、删除商品以及计算总价等操作。 ... [详细]
  • 本文探讨如何在VueJS项目中通过配置vue.config.js文件实现多页面应用(MPA),特别是针对管理端和客户端的不同需求。 ... [详细]
  • 作为一名新手开发者,我正在尝试使用 ASP.NET 和 Vue.js 构建一个单页面应用,涉及多个复杂组件(如按钮、图表等)。希望有经验的开发者能够提供指导。 ... [详细]
  • Vue 开发技巧:实现数据过滤与排序功能详解
    Vue 开发技巧:实现数据过滤与排序功能详解 ... [详细]
  • 基于Net Core 3.0与Web API的前后端分离开发:Vue.js在前端的应用
    本文介绍了如何使用Net Core 3.0和Web API进行前后端分离开发,并重点探讨了Vue.js在前端的应用。后端采用MySQL数据库和EF Core框架进行数据操作,开发环境为Windows 10和Visual Studio 2019,MySQL服务器版本为8.0.16。文章详细描述了API项目的创建过程、启动步骤以及必要的插件安装,为开发者提供了一套完整的开发指南。 ... [详细]
author-avatar
手机用户2502886503
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有