直接修改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程序设计有所帮助。

直接修改html文本页面没变化,VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析...相关推荐

ajax没返回响应数据,jQuery的Ajax时无响应数据的解决方法
jQuery的Ajax时无响应数据的解决方法复制代码代码如下: $.ajax( { type: "POST", url: "/MemberComment.aspx/G ...
ios 底部用定位 fixed。在软件盘出来后，页面元素被顶上去一部分，fixed定位的footer也跑到了上面去。解决方法...
ios 底部用定位 fixed.在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去.解决方法 $("input").focus(function() ...
ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法
ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法参考文章: (1)ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法 (2) ...
elementUI更改icon图标尺寸、圆形按钮尺寸方法，以及css修改页面没变化为题
icon图标尺寸修改在做博客的时候,用到了element的图标,却修改不了大小,后来知道这个图标是通过font-size设置大小. html代码: <i class="el-icon ...
传奇霸业服务器没响应,腾讯传奇霸业怎么玩不了腾讯传奇霸业进不去解决方法...
腾讯传奇霸业怎么玩不了?在玩游戏的过程中可能遇到过黑屏.闪退.进不去游戏的问题,下面跟小编一起来看看这篇腾讯传奇霸业进不去解决方法吧! 腾讯传奇霸业怎么玩不了 1.网络不稳定大部分网络不稳定时会造成 ...
修改系统时间导致myeclipse不能自动发布的解决方法
今天为了测试开发的系统时间,在myeclipse打开的情况下修改了系统时间,当我测试完毕,再把系统时间改回来后,问题出现了,不管怎么改程序,myeclipse主是不能自动将修改后的文件发布到tomca ...
前端开发：Vue报错Computed property “show“ was assigned to but it has no setter的解决方法
前言在前端开发中,使用Vue的时候关于组件使用是非常常见的操作,而且也会遇到各式各样的问题,尤其是刚接触前端开发的开发者.本篇博文分享一下在封装关于Vue的组件的时候,通过计算属性监听父子组件传值提 ...
linux显示屏没信号,电脑开机显示器无信号然后黑屏怎么办|电脑黑屏没有信号的解决方法...
‍‍ 有很多用户向小编反馈,电脑开机后会听到滴的一声,并且显示器上面显示无信号,之后就黑屏了,重启也没有用,这是怎么回事呢?遇到电脑开机显示器无信号然后黑屏怎么办?这很有可能是电脑主机与显示器之间的数 ...
vue数据修改之后没有同步渲染出来，需要点一下屏幕才会进行页面更新（原因和解决方法）
这是一个很奇怪的问题,当时需要做一个状态判断,设置了一个布尔值 edit:false 如果是false则显示按钮A, 反之则显示按钮B, 但真正使用的时候出现了问题,当点击之后,edit数值变成了tr ...

直接修改html文本页面没变化,VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析...

直接修改html文本页面没变化,VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析...相关推荐

最新文章

热门文章