VUE JS修改innerHTML后页面没有更新

2024-10-22

记一次vue使用innerHTML更新dom出现的样式失效问题

场景说明:我在实现对html拼接后重新渲染到页面的功能遇到了一点问题,当然实际的业务逻辑并没有这么简单,所以只提出这个问题,而不讨论如何修正: 具体情况:使用refs获取到dom,然后使用innerHTML来更改内容,内容为 html,其样式早已在style中写好,并且使用scoped限制作用域:但是在更改后的内容的样式却并未生效; 具体代码: HTML: <div class="test" ref="test"> <p>这是原始内容,颜色为

Vue.js的列表数据的同步更新方法

这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift(),splice(),sort(),reverse()等都会触发列表的更新;filter(),concat(),slice()等不会触发列表的更新! 下面两种情形也不会触发列表数据更新 1.为数组的某一项赋值 vm.items[indexOfItem] = newValue,2.改变数组的长度 v

用vue.js重构订单计算页面

在很久很久以前做过一个很糟糕的订单结算页面,虽然里面各区域(收货地址)使用模块化加载,但是偶尔会遇到某个模块加载失败的问题导致订单提交的数据有误. 大致问题如下: 1. 每个模块都采用usercontrol(收货地址.配送范围.支付方式.优惠券等等),维护起来很困难. 2. 每个模块的加载都是一个Ajax请求,并且根据前后顺序关系加载多个模块即多个Ajax请求.比如用户修改收货地址后系统重新计算配送方式和支付方式,并刷新配送方式.支付方式.订单总金额等数据,一般情况下没问题,但偶尔会遇到某个模块

8种Vue中数据更新了但页面没有更新的情况

目录 1.Vue 无法检测实例被创建时不存在于 data 中的属性 2. Vue 无法检测'对象属性'的添加或移除 3.Vue 不能检测利用数组索引直接修改一个数组项 4.Vue 不能监测直接修改数组长度的变化 5.在异步更新执行之前操作 DOM 数据不会变化 6.循环嵌套层级太深,视图不更新? 7.路由参数变化时,页面不更新(数据不更新) 8.使用keep-alive之后数据无法实时更新问题 1.Vue 无法检测实例被创建时不存在于 data 中的属性原因: 由于 Vue 会在初始化实例

关于Vue.js 使用v-cloak后仍显示变量的解决方法

v-cloak 这个指令是防止页面加载时出现 vuejs 的变量名而设计的,但有时候添加了这个指令仍会显示变量,这是怎么回事呢?. v-cloak 用法: HTML代码: <div v-cloak> {{ message }} </div> CSS代码: [v-cloak] { display: none; } 这样直至div内变量编译完毕后才会显示. 但有时添加完毕后仍有部分变量会显示,这是怎么回事呢?通过控制台查看,原来是 v-cloak 的display属性被优先级别高的

vue.js数据可以在页面上渲染成功却总是警告提示某个字段“undefined”未定义

最近在开发公司的一个后端管理系统,用的是比较流行的vue框架.在开发过程中,总是出现各种各样的报错问题,有警告的,有接口不通的,有自己马虎造成的低级错误的等等,这些错误在一些老司机面前分分钟解决,但今天遇到的问题,让老铁犯了难,头大. 先来看看报什么错: [Vue warn]: Error in render: "TypeError: Cannot read property 'bdName' of undefined" TypeError: Cannot read property

[已解决] wordpress 修改 permalink 后页面 404 问题

功能说明为了利于SEO优化,我们需要将地址设置为永久链接,在层级不要太深的情况下实现伪静态页面的目的,例如wordpress 默认页面地址为: https://www.ryanzoe.top/?p=15 修改 Permalink 后的地址: https://www.ryanzoe.top/wordpress/wp_list_categories-%E5%88%86%E7%B1%BB%E5%88%97%E8%A1%A8%E5%AE%9E%E7%8E%B0/ 问题一般情况当我们把链接更换为非默认

使用vue.js + laravel开发单页面应用

最近学了vuejs和laravel,然后顺便就撸了简单的demo,这里将会根据这个demo介绍下如何使用vuejs+laravel开发一个简单的单页面应用,demo的github地址是https://github.com/helbing/laravel-vue-start-kit 开发环境 windows 穷,没办法,买不起苹果 phpstudy windows中最好的php集成开发环境,没有之一开发中所需的一些包介绍 package.json 如果会vuejs的话,那么绝大多数的包就算不用介

bootdo开源项目修改代码后页面无效

修改了JS文件,重启服务后,发现页面没有刷新出效果. 清空缓存一般就可以解决此问题.

Intellij IDEA 修改代码后自动编译更新

Intellij IDEA 一些不为人知的技巧问题描述: Intellij IDEA 调试修改时,改动页面和 java 文件后,无法立刻看到变化,需要手动重启服务. 问题原因: 在 IDEA tomcat 中 server 的配置里,找到 on frame deactivation 条目,选择 update classes and resources. 由于服务器添加的 Artifact 类型问题,有的项目可能没有 update classes and resources 这个选项,只有 Ho

vue中修改数组，dom未更新的问题

vue中我们会频繁操作各种数据,但有时候发现修改完数据以后,dom并未更新? 比如有一个数组对象: obj = [{'name': 'joy'},{'name': 'bowen'}] 我要循坏插入某个属性,或者修改某个属性的值: for (let i=0; i<obj.length; i++) { obj[i].year = '20'}发现数组可以修改成功,但是dom元素不会更新,这是为什么呢? 原因:vue监听对象的变化,但是无法监听对象自身属性的改变,所以无法更新dom,除非我们更新这个数组

解决vue.js修改数据无法触发视图

data:{checkValue:{}}that.checkValue[key] = [] 赋值无法实时改变变量:(数据其实最终被修改,但是并没有触发检测从而更新视图)原因:Vue 不能检测到对象属性的添加或删除解决:改用vm.$set方法可以触发检测

前vue.js+elementui，后koa2，nodejs搭建网站

1,安装 nodejs,npm 2,使用 npm 安装 vue,vue-cli 3,使用脚手架搭建项目,添加依赖:axios,vue-router,elementui,vuex 等 4,建立 router.store 5,编写导航页.组件 6,npm run dev/serve 调试 7,配置 vue.onfig.js 8,npm run build 生成dist 9,置于koa2开放静态文件夹中 10,配置koa2启动端口,启动后前端已成功搭建 11,为koa2项目安装orm,(sequeli

Vue.js根据列表某列值更新filter

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="../Scripts/jquery-1.10.2.min.js"></script> </head> <body> <div id="matchList"

vue 路由参数变化，页面不更新的问题

监控$route 在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,如果不监听路由参数值的变化,页面无数据刷新,需手动刷新浏览器,这样做就不是我们的预期效果. 举例:当前路由为 /pjthome?pjtid=123456 mounted: function () { this.pjtid = this.$route.query.pjtid this.pjtdetail() }, 在页面pjtdetail()方法中,需要用到pjtid这个参数,假如在同一页面有相似项目切换,只是p

vue.js 跳转同一页面，传不同值，组件监听路由

watch: { '$route' () { this.type = this.$route.params.type this.loadData() } },

webpack配合vue.js实现完整的单页面demo

本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的服务器在国外,可能我们下载的过程会比较慢,所以建议用阿里的镜像cnpm安装,10分钟实时更新一次npm的镜像.具体的下载配置参考阿里的cnpm官网.本文章只是和大家探讨怎么利用webpack配合vue.js做一个单页面应用,具体关于vue里面的内容怎么写并不在本篇文章的介绍范围. 1. 定义我们de

建立多页面vue.js项目

介绍根据需求,我们希望建立一个多页面的vue.js项目,如何改造单页面vue.js项目为多页面项目?跟着我的步伐看下去吧. 1.创建单页面vue.js项目简单的记录一下创建步骤: --安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org --安装vue-cli npm install -g vue-cli --安装webpack并新增目录 vue init webpack sp-demo01 --进入项目目

vue.js多页面开发环境搭建

利用 vue-cli 搭建的项目大都是单页面应用项目,对于简单的项目,单页面就能满足要求.但对于有多个子项目的应用,如果创建多个单页面,显示有点重复,特别是 node_modules 会有多份相同的.如果全部放到单页面项目下,又显得有点乱,这时候通过改造 vue-cli 搭建的项目为多页面,就是一个比较好的解决方法. 如何改造单页面 vue.js 项目为多页面项目?下面是这次改造的具体过程. 一.创建单页面 vue.js 项目这里直接使用官方提供的脚手架 vue-cli3 创建,具体的过程请

Vue.js devtool插件安装后无法使用的解决办法

初次使用Vue.js devtool插件的新人在安装了Vue.js devtool插件后,都会经常有一个疑问.我在chrome浏览器里面已经成功安装好Vue.js devtool插件,怎么点击后提示vue.js not detected,无法正常使用呢?对于这样的问题,新人可能会花费很多时间去找答案,今天我们就来整理了解决方法,希望对大家有帮助.首先,我们先要确保Vue.js devtool插件已经安装成功了.具体的Vue.js devtool插件的安装方法可以:chrome插件CRX的离线安装

部署hexo后github pages页面未更新或无法打开问题

title: 部署hexo后github pages页面未更新或无法打开问题 date: 2018-03-30 15:34:29 categories: methods tags: hexo github pages 部署本地编写完成后,要同步Github Pages,运行以下三个命令即可: hexo clean hexo g hexo d 需要注意的是这些命令应该在hexo目录的根目录下进行. 部署后页面未更新使用无痕模式浏览或者等一段时间再查看. 更推荐运行hexo s后利用本地服务器在

VUE JS修改innerHTML后页面没有更新

热门专题