vue data变量相互赋值后被实时同步的解决步骤

数据结构是这样子的

data() {
   return {
    title: 'web前端 this data变量相互赋值后被实时同步问题',
    val_1: 'vue',
    val_2: ''
   }
}

问题源：

我们在onload()把val_1 赋给 val_2 (或者在用户click时更改也都会出现这个问题)

onload() {
 this.val_2 = this.val_1;
}

解决方法：

我们在通过JavaScript把 “val_1” 转换成字符串类型，再JSON.parse，最后再赋给 “val_2” 就解决了

onload() {
 this.val_2 = JSON.parse(JSON.stringify(this.val_1));
}

补充知识：vue定义的全局变量在一个方法赋值过后在另一个方法中是空

在学习vue的过程中，发现了许多小的问题，例如：我定义一个全局变量a，为了可以在下面定义的方法中一直取得到这个全局变量，在方法中我添加了一个jquery的click方法，在这个方法里面用this.a = b(自定义的一个变量)；然后到另一个方法中去使用这个全局变量a，发现根本没有进行赋值，还是原来的全局变量的值。

原因如下：因为click函数使this的指向发生了变化。所以要在click函数的外面添加一句：

var self = this;

然后在click函数里面为全局变量赋值要写：

self.a = b;

这样就不会改变this的指向了！

以上这篇vue data变量相互赋值后被实时同步的解决步骤就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中的双向数据绑定原理与常见操作技巧详解

    本文实例讲述了vue中的双向数据绑定原理与常见操作技巧.分享给大家供大家参考,具体如下: 什么是双向数据绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化.这也是算是vue的精髓之处了.值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定.单向数据绑定是使用状态管理工具的前提,如果我们使用vuex,那么数据流也是单向的,这时就会和双向数据绑定有冲突,我们可以这么解决.

  • Vue中用props给data赋初始值遇到的问题解决

    前言 前段时间做一个运营活动的项目,上线后产品反馈页面埋点不对,在排查过程中发现,问题竟然是由于Vue中的data初始值导致,而data的初始值来自于props.为方便描述,现将问题抽象如下: 一.现象 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用props初始化data中变量</title>

  • vue 解决异步数据更新问题

    问题 记录一下出现的问题, 数据翻倍 这是复现问题的代码 data() { return { space: "", allresult: [] }; }, methods: { getmessage() { this.allresult = []; axios .get( "https://gist.githubusercontent.com/xiaolannuoyi/9b0defe4959e71fa97e6096cc4f82ba4/raw/4be939123d488cee7

  • vue 需求 data中的数据之间的调用操作

    我遇到过这种情况 就是在我的data中 会有数据调用data中的其他数据 如图 我的alertInfoType需要拿到screeningCondition中type的值 用过vue的都知道 我是不能写成alertInfoType:this.screeningCondition.type这种的 原理是什么?忘记了 知道了可以评论说下 所以 我们可以这样写 在mounted中直接赋值就可以了! 不知道你们有么有遇到过这种情况 反正我是遇到了两次了 第一次忘记怎么处理的了 ...... over 希望

  • vue data变量相互赋值后被实时同步的解决步骤

    数据结构是这样子的 data() { return { title: 'web前端 this data变量相互赋值后被实时同步问题', val_1: 'vue', val_2: '' } } 问题源: 我们在onload()把val_1 赋给 val_2 (或者在用户click时更改也都会出现这个问题) onload() { this.val_2 = this.val_1; } 解决方法: 我们在通过JavaScript把 "val_1" 转换成字符串类型,再JSON.parse,最后

  • vue data对象重新赋值无效(未更改)的解决方式

    vue存在一个比较深的问题就是data中的属性对象如果在初始化的时候为{},那么后面在方法用普通的js语法赋值会无效 这里是data data() { return { model: {} }; } 这里是方法里的普通赋值 afterUpload(response) { this.model.icon = response.url; } 普通方法会无效,需要使用vue提供的方法重新显示声明 afterUpload(response) { this.$set(this.model,'icon',r

  • Vue中input被赋值后,无法再修改编辑的问题及解决

    Vue中input被赋值后,无法再修改编辑的问题及解决

    目录 input被赋值后,无法再修改编辑 我们直入主题 方法一 方法二 vue综合问题归纳input框赋值后不能进行编辑 项目场景 问题描述 原因分析 解决方案 input被赋值后,无法再修改编辑 我们直入主题 上面是我司的业务逻辑图,使用elementui框架,如图,请求数据赋值后,不仅有检测报错信息,而且还有无法修改编辑的问题. 起初以为是我的设置的对象问题,困扰我许久. 后来,翻阅了大佬的文章才了解. <el-form ref="formInline" :inline=&q

  • vue3中reactive数据被重新赋值后无法双向绑定的解决

    vue3中reactive数据被重新赋值后无法双向绑定的解决

    目录 reactive数据被重新赋值后无法双向绑定 推荐写法 vue3数据的双向绑定 一.script setup 二.ref() 函数 三.reactive()函数 reactive数据被重新赋值后无法双向绑定 这是因为reactive数据被重新赋值后,原来数据的代理函数和最新的代理函数不是同一个,无法被触发 推荐写法 import {reactive, toRefs} from 'vue' setup(props, context) { const state = reactive({ my

  • vue 对象添加或删除成员时无法实时更新的解决方法

    vue 对象添加或删除成员时无法实时更新的解决方法

    前阵子将项目搬上Vue的时候偶遇一个突发问题 当对象添加或删除成员时页面无法实时更新渲染,但是数组是正常的 目测是ob没有监听到对象的成员有变化 查看一些大家的求助回答是说ob监听的是数组length的变动 对象默认没有length 新增成员时不会自增length 所以监听不到对象的变化 最近大脑过于疲惫 懒得看文档了... 不多废话 解决方式直接上代码 在实例内部可以用$set和$delete this.$set(this.age,'age',18); this.$delete(this.ag

  • vue.js iview打包上线后字体图标不显示解决办法

    在vue+cli项目中使用iview组件及icon图标,打包后icon不显示,解决办法: 1.在build文件夹下找到utils.js文件,把publicPath改为 ../../ if (options.extract) { return ExtractTextPlugin.extract({ publicPath:'../../', use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader

  • 图解Python变量与赋值

    Python是一门独特的语言,与C语言有很大区别,初学Python很多萌新表示对变量与赋值不理解,学过C的都知道,给变量赋值时,需要先指定数据类型,同时会开辟一块内存区域,用于存储值,例如: int a = 1; a 就是内存空间中的一小块区域,就像是一个大房间里面的一个小盒子,赋值就是把整数1装载到盒子里面. 现在给变量a重新赋值 a = 2; 盒子依然是那个盒子,也就是说内存地址没有变,只是该段内存中的值变了,变成了2. 再来看: int b = a; 当把变量a赋值给另外一个变量b时,相当

  • vue 避免变量赋值后双向绑定的操作

    如: this.list = this.list2, 结果在list改变后 list2也改变,这不是我们想要的效果 第一种: 利用 JSON.parse 和 JSON.stringify this.list= JSON.parse( JSON.stringify(this.list2) ) 第二种: ES6 的解析语法 this.list= { ...this.list2} this.arr= [...this.arr2] 补充知识:解决vue中v-model绑定的变量赋值给了另一个变量后,两个

  • vue如何遍历data所有变量并赋值

    vue如何遍历data所有变量并赋值

    目录 遍历data所有变量并赋值 遍历data工具类 遍历data所有变量并赋值 遍历data工具类 var _data_str = sessionStorage.getItem("SCM301"); //将json字符串转成对象 var store_data = JSON.parse(_data_str); if (_data_str) { //this._data为vue的data组件中的data getObjectData(this._data, store_data); } /

  • 在Vue mounted方法中使用data变量详解

    如下所示: data: { certificates: null }, mounted: function () { var __this = this; __this.certificates = getDictForkey("学历"); } 使用this对data中变量进行调用 vue生命周期参照官方:点击进入 vue渲染页面的时候,可能会对某些数据进行字典操作,比方性别,数据中是0和1,字典值是男和女,这个时候就需要在mounted进行"性别"字典的获取,然后

随机推荐