- vue 改变一个地方， 其他地方自动渲染改变，该如何实现呢？
-
我想做一个自动切换语言的页面，
目前遇到的问题便是数据改变了， 但是view无法渲染。
思路：
在vuex中创建了
store，state，getter跟mutations
代码// state export default { currentlanguage: 'cn', // 当前语言 }// getters export default { getlan: (state) => { return state.lan }, getcurrentlanguage: (state) => { return state.currentlanguage } }import * as types from './mutation-type' export default { [types.SET_LAN] (state, currentlanguage) { console.log(currentlanguage) state.currentlanguage = currentlanguage.lan } }app.vue 中调用
index.vue 中调用
得到的结果
出来中文的版本完全没问题
切换为英文的时候， 就上面导航变了， 还有state的数据也改变了， 但没有渲染出来，
要如何才能达到预想的效果呢？
0
- 其他相关推荐
- 点击一个地方显示某个元素，点击其他地方隐藏某个元素实现
- 今天做工作的时候有一个需求，实现留言功能的业务，这个业务基本上是仿的是csdn博客的留言区功能。当点击留言文本域的时候呢发表留言的按钮会出现，点击其他的地方的时候留言按钮就会消失。这个其实也很好实现，一开始没成功，原因是我竟然忘记了事件冒泡。。打脸打脸~所以整理了一下记录下。首先写一下阻止事件冒泡的函数function stopPropagation(e){ if(e.stopPropaga...
- vue实现点击其他地方简单管用
- 思路很简单，把页面中的其他点击事件阻止一下冒泡，然后点击body的时候正常做你想做的操作就行，超简单nnjs：nndata: function(){n return {n show:falsen }n},nmounted () {n document.addEventListener('click', this.handleBodyClick)n},ndestroye...
- 实现点击页面其他地方，隐藏div（vue）
- 方法一： nn 通过监听事件nndocument.addEventListener('click',function(e){nn if(e.target.className!='usermessage'){nn that.userClick=false;nn }nn})nn方法二（比较好）：nn ...
- 关于vue子组件改变父组件传递的值的问题
- 正常对于vue父子组件来说子组件是不能改变父组件props过来的值的，但是今天在做项目的时候发现了一个有意思的事情，子组件是可以直接通过改变props的值来改变父组件相对应数据的值的。nn这里我们将props的值的类型分为3种（字符串，数组，对象）nn先说对象吧nn子组件直接改变父组件props过来的对象是可以直接更新父组件的数据的而且不会报错。nnn子组件：n<template> n...
- 点击元素以外的地方隐藏元素插件
- clickOutHide，点击元素以外的地方隐藏元素jQuery插件。能够支持忽略部分元素的配置，灵活方便。
- vue2.0 点击其他区域关闭自定义div
- vue2.0点击其他区域关闭当前弹出
- vue+ elelment-ui +tree树形组件背景颜色的修改，点击节点背景颜色修改设置为其他颜色，或是样式不生效的原因
- 本文仅作为我在初次学习vue+element-ui路上碰到的一些问题以及解决的办法的记录，不论问题的难易程度，于我而言是一种成长过程的记录，望大佬勿喷。nvue+ elelment-ui +tree树形组件背景颜色的修改，直接在Element官网拷贝过来的树形组件背景颜色是白色，每次点击以及鼠标悬浮上后会有一个偏灰的背景颜色。如图nn但是如果我需要用树形组件放在一个黑色背景或其他背景颜色时，树形自...
- vue修改对象属性后页面不重新渲染
- n&lt;el-form-itemn v-for="(repairWorker, index) in ruleForm.repairWorkers"n :label="'车牌号' + (index+1)"n :key="repairWorker.id"n :prop="(repairWorker.name)"n ...
- vue列表渲染，以及鼠标点击改变样式的问题
- 在实际项目中，我们进场会遇到鼠标点击该表某个DOM元素的样式，在原生的js或者jquery中，我们会比较熟练的实现这个需求，但是在vue中怎么实现呢？nn直接操作DOM？NO!NO!nn既然我们的项目使用了vue，为什么还有本末倒置的操作DOM呢，你只要记住vue的核心是什么，这个就容易实现了，比我们操作原生的DOM要容易多；那么怎么操作呢？nn废话少说直接上代码：nnn这是html模板n&lt;...
- Vue循环数组改变其中某一项的属性，视图不会重新渲染
- Vue循环数组改变其中某一项的属性，视图不会重新渲染nn举个例子： nnn上图中的数据源于后台返回的数组然后直接在页面进行渲染nnn 我们点击圆圈勾选上这一条内容，此时这一条的属性确实发生了改变，但是页面却不会做出重新渲染的动作，导致页面毫无反应的假象nnn这时可以在点击开关的点击事件里面调用Vue的一个方法nnVue.set()nn这个方法中有三个参数nnVue.set(页面循环的数组，索引值...
- Vue js 实现点击页面其他地方隐藏指定div
- Vue js 实现点击页面其他地方隐藏指定divn&lt;template&gt;n &lt;!--向页面添加关闭div的事件监听--&gt;n &lt;div class="page" @click="hide"&gt;n n &lt;!--添加.stop防止page的点击事件触发，导致无法显示div--&gt;n &lt;button @click.stop="
- vue 定时刷新改变输出内容
- nnn&lt;!DOCTYPE html&gt;n&lt;html&gt;nn&lt;head&gt;n &lt;meta charset="UTF-8"&gt;n &lt;title&gt;vue-test&lt;/title&gt;n &lt;script src="./vue.js"&gt;&lt;/script&g
- vue单一组件下动态修改数据时的全部重渲染
- 今天在学习vue的过程中，发现一个有趣的现象 在某一组件下的某一数据通过点击事件被动态修改的时候，对应view中的数据同步的进行了修改，没错，这不是废话吗，vue的一大特色就是数据的双向绑定。可有趣的是，该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化n这就让我这个刚入门的小白有点奇怪了，我修改一个，怎么变了两个？？？？.........脑洞放开一想，会不会数
- vue修改数据页面不重新渲染
- 使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，场景如下：nnnn&amp;lt;template v-for=&quot;item in tableData&quot;&amp;gt;n &amp;lt;div :class=&quot;{'redBorder':item.red}&quot;&amp;gt;n &amp;lt;div&amp;gt;{{ it
- vue怎么实现不同组件间（非父子组件间的通信），一个变化，另一个实时变化的效果
- vue中，只有组件内的值，发生了变化，组件才会重新渲染，那我们怎么实现，两个不同组件，一个组件内的值发生变化，另一个组件也随之变化，比较常用的场景就是下面的例子了：nn头部导航是一个单独的组件，侧边栏是一个组件，其余部分是内容区，想要的效果就是，当内容区的个人信息修改成功之后，希望头部右侧的个人信息（姓名和头像）也随着变化nn分析：头部和内容区，不在同一个组件内，也不是父子关系nn解决办法：通过...
- 实现点击其他位置弹窗消失的方法
- 1、 对整个文档 document 添加监听事件n2、div 添加tabindex 使其有focus blur 在blur时 使弹窗消失nn
- vue（数据改变，DOM不渲染问题）
- nn1、组件内部，属性值地址空间内引用地址改变，DOM不能渲染。nn 问题举例：this.items = [[],[],[],[]]nn nnnn1、在items 中，修改任意一项数组中的值，DOM是不会更新的，n2、解决方案： this.items = [...this.items]。通过解构赋值，重新给items赋值。nnn2、组件之间传值，父组件传data改变,子组件未更新。nnn...
- vue 修改对象属性 页面不重新渲染
- 官方解释：nVue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。n注意事项n在给对象赋值时一定要保证新的对象拥有其所有响应的属性，否则修改到非响应属性时也会造成页面不重新渲染。nn...
- 修改vue的数据后没有对dom进行重新渲染
- 记录下开发时遇到的vue的一个问题。前端使用的是layer(2.3.0) + vue.js(2.5.16) 。nn正常情况，用vue对input框进行了双向绑定后，对vue的数据进行修改，vue会对被修改数据对应的input框进行重新渲染。nn而我需要的情况是：nn 在js中对vue的数据进行修改后，只有在特定条件下vue才会进行重新渲染，否则input框中还是显示修改之前的数据。通...
- angularjs实现点击图标显示div，点击div以外的区域隐藏div
- 代码如下：rn$(document).on('click',function(e){n var target = e.target|| e.srcElement;n var select = document.getElementById('select_enquiry')//点击的图标n var element = docume
- 点击其他地方弹层消失
- 点击其他地方弹层消失rnrnbody,html{rnwidth:100%;rnheight:100%;rn}rn.opciaty{rnwidth:200px;rnheight:200px;rnbackground:#000;rnopacity:0.5;rnfilter:alpha(opacity=5);rnposition:absolute;rntop:50%;rnleft:50%;rnmargi
- 关于vue点击控制单个样式
- 既然是控制单个样式，我们的html里面的内容一定是v-for=""；渲染出来，一定要养成一个好习惯，v-for="(item,index) in items";index就是我们所说的索引。nn我做的项目类似于微信朋友圈，弹出赞与评论按钮，点击一个全体都会弹出；我们要解决的就是点一个只弹出对应的一个，对button按钮对应其中的INDEX。n这个index对应着v-for中的index；
- vue修改对象的属性值后页面不重新渲染
- 最近项目在使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，场景如下：rnHTML页面如下：rnrnn n {{ item.name}}n n 编辑n n n nrnjs部分如下：r
- Vue数组踩坑日记props对象里面的部分数组改变无法重新渲染
- 首先声明一个组件然后往组件里面丢对象n；nhtml是在渲染以后修改数组nnjs代码更改对象中的数组n；n**nnvue有说明在数组直接通下标改变是不会被观察到的所以我试了(vue.set但是我并不是通过下标改变而是直接改变整个组数所以一样没用）**nn2. 然后我又试试了强制更新this.$forceUpdate()这个倒是生效nn后面我又尝试使用push来试试结果一样失败了。n但是具体为什么还是...
- VUE脱坑/1-- 如何解决vue 赋值后原数据随赋值后的数据的变化而变化
- 错误示例n this.leftColumn = {...this.Columns};n this.rightColumn = {...this.Columns};nn正确示例n this.leftColumn = JSON.parse(JSON.stringify(this.Columns));n this.rightColumn = JSON.parse(JSON....
- jquery 点击元素以外任意地方隐藏该元素的方法
- 假设对象的id为divBtn，则代码如下,但不支持IE8： nnn$('body').bind('click', function(event) {n // IE支持 event.srcElement ， FF支持 event.target n var evt = event.srcElement ? event.srcElement : event.target; n ...
- VUE重复修改属性值页面无法及时渲染问题
- 最近在做VUE项目时遇到一个坑。a方法修改某一属性的值后，调用b方法，b方法里面修改同一属性，虽然该属性的值已发生变化，但是一直无法及时渲染到页面上nn例如：nnndata(){n return {n i:0n }n},nnjs方法：nnna(){n var that=this;n that.i=1;n that.b();n}...
- vue 实现点击弹出框以外的地方，隐藏弹出框
- <template>n <div>n <ul>n <li v-for="(item,index) in data1" :key="item.id">n <span @click.stop="toggle(index)"></span>n ...
- Qt 音乐播放器：实现点击窗体外的地方该窗口自动关闭
- 最近在模仿网易云播放器的时候遇到这个问题：点击"播放列表"弹出音乐列表窗体，点击该窗体的其他的地方。该窗口自动关闭，如下所示：nn（ps:录屏的时候，鼠标显示不出来，尴尬！）n为此，记录实现该种效果的方法：n//创建该对象的时候，设置坐标和大小都为0nm_pMusicPlayListWidget = new MusicPlayListWidget(this);nm_pMusicPlayListWi...
- vue 自定义指令 实现点击下拉菜单外部区域关闭下拉菜单
- 我们来看下常见的下拉菜单：nn这里我们点击菜单，下拉菜单就会显示，点击下拉菜单以外的区域就会隐藏。n这是一个简单的例子：nn这里增加一个选项，就是当我们按下esc键的时候，下拉菜单也可以关闭。n先贴出代码：n&lt;template&gt;n &lt;div v-cloak v-clickoutside="outsideClose" class="dropmain"&gt;n &lt;di...
- Vue的修改数据页面不重新渲染
- 需求：nn通过一个数组渲染出商品列表，现在我通过价格对数组内的商品进行排序，希望改变数组后重新渲染商品列表。nn问题：nn数组改变之后并没有重新渲染。nn测试流程：n（1）页面渲染出乱序的商品列表nnnn图片.png376x598 80.2 KBnnn（2）冒泡排序修改数组n（3）打印出改变之后的数组n（4）页面毫无变化nnnn图片.jpg379x598 86.4 KBnn nn数组的数据格式如下...
- 点击控件以外的地方隐藏控件
- ;(function($){ n$.fn.clickOtherHide = function () { n var $this = this;//注意this在这后是否被解绑,如果解绑了，插件就失效了。n $this.off("click").on("click",function(e){n stopPropagation(e);//相当于return false;即阻止冒泡，不冒泡
- 按钮点击背景色变化、文字颜色变化
- 按钮点击背景色变化、文字颜色变化,代码里将的很详细啦，绝对没问题哦
- 使用Vue渲染swiper模板,按钮点击设置渲染内容
- n&lt;!DOCTYPE html&gt;n&lt;html lang="en"&gt;n&lt;head&gt;n &lt;meta charset="UTF-8"&gt;n &lt;meta name="viewport"n content="width=device-width, user-scalable=no, initial
- vue中父组件传值给子组件，父组件值改变，子组件不能重新渲染
- 1在子组件中用watch()监听值的改变，不同的类型的要用不同的监听方法props: {n echartStyle: {n type: Object,n default() {n return {}n }},n titleText: {n type: String,n default: ''n },n tooltipFormatt...
- Vue下拉框点击选中，点击其他区域消失
- vue-cli中实现下拉框点击其他区域消失rnrn 排序rn rn {{sort}}选中显示rn rnrnrnrnexport default {rn name: 'hello',rn data () {rn return {rn show: falsern activeName:'',rn sorts :{rn "defa
- vue实现弹框遮罩, 点击其他区域弹框关闭, v-if与v-show的区别
- vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展nv-if 是直接删除dom节点, 就是这个div就不存在了nv-show 是控制dom的css样式设置为 display: none; 来实现,dom还是存在;n实现如下nmaskshow来控制控制遮罩的显示隐藏,绑定一个时间点击遮罩的时候关...
- vue+定时器 自动变化的进度条
- nn一、定时器的写法：（本例运用的是setInterval）nn（1）对定时器使用的基本理解 nnn定时器名 = setInterval(“要执行的函数名”，定时时间毫秒); //定时器nnclearInterval(“定时器名”); //取消定时器nn（2）本例中应用的模式nnnvar id=setInterval(()=&gt;...
- Vue.js自定义下拉列表，如何实现在下拉列表区域外点击即可关闭下拉列表的功能
- 这个上传资源是为了配合我的博客 http://blog.csdn.net/zhangchao19890805/article/details/72808639。运行项目之前建议使用 yarn install 安装依赖。