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

2个回答

后面用i18n完美解决!

0

this.$forceUpdate()试一下

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
点击一个地方显示某个元素,点击其他地方隐藏某个元素实现
今天做工作的时候有一个需求,实现留言功能的业务,这个业务基本上是仿的是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<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<...
Vue循环数组改变其中某一项的属性,视图不会重新渲染
Vue循环数组改变其中某一项的属性,视图不会重新渲染nn举个例子: nnn上图中的数据源于后台返回的数组然后直接在页面进行渲染nnn 我们点击圆圈勾选上这一条内容,此时这一条的属性确实发生了改变,但是页面却不会做出重新渲染的动作,导致页面毫无反应的假象nnn这时可以在点击开关的点击事件里面调用Vue的一个方法nnVue.set()nn这个方法中有三个参数nnVue.set(页面循环的数组,索引值...
Vue js 实现点击页面其他地方隐藏指定div
Vue js 实现点击页面其他地方隐藏指定divn<template>n <!--向页面添加关闭div的事件监听-->n <div class="page" @click="hide">n n <!--添加.stop防止page的点击事件触发,导致无法显示div-->n <button @click.stop="
vue 定时刷新改变输出内容
 nnn<!DOCTYPE html>n<html>nn<head>n <meta charset="UTF-8">n <title>vue-test</title>n <script src="./vue.js"></script&g
vue单一组件下动态修改数据时的全部重渲染
今天在学习vue的过程中,发现一个有趣的现象 在某一组件下的某一数据通过点击事件被动态修改的时候,对应view中的数据同步的进行了修改,没错,这不是废话吗,vue的一大特色就是数据的双向绑定。可有趣的是,该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化n这就让我这个刚入门的小白有点奇怪了,我修改一个,怎么变了两个????.........脑洞放开一想,会不会数
vue修改数据页面不重新渲染
使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下:nnnn<template v-for="item in tableData">n <div :class="{'redBorder':item.red}">n <div>{{ 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<template>n <div v-cloak v-clickoutside="outsideClose" class="dropmain">n <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<!DOCTYPE html>n<html lang="en">n<head>n <meta charset="UTF-8">n <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-cli 更改数组中的数据,页面dom及时渲染 Vue.set方法
-
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(()=>...
Vue.js自定义下拉列表,如何实现在下拉列表区域外点击即可关闭下拉列表的功能
这个上传资源是为了配合我的博客 http://blog.csdn.net/zhangchao19890805/article/details/72808639。运行项目之前建议使用 yarn install 安装依赖。
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 nlp课程改变 大数据改变教育