VUE中监听企业开发实践

背景:我干哦!最近需求是让中英文翻译vue页面,我这个后端哪里会哦,这不遇见了一个棘手的问题,我描述下:上面是一个list 根据查询到的值进行判断显示,如果是z就显示主信息,其他的ABC正常显示。试了几种方式后都不行,然后问了问同事,学到了监听的使用步骤,最终实现切换中英文的时候,下拉框里面的内容成功的切换为了中英文

接下来我记录下实现步骤:

1.引入vue

import Vue from 'vue';

2.定位到初始化的list,也就是这个newItemList

data() {return {treatyid: this.$route.query.treatyid,newItemList: [{value: 'z',lable: '主信息'}],selected: 'z',downLoadInfo: {dialogShowFlag: false,treatyid: this.$route.query.treatyid,filetype: '2',itemid: 'z'}};},

3.初始化的时候进行监听,我这边是进行判断i18n是中英文然后进行判断,如果等于en就是英文,等于zh就是中文。

let language = this.$i18n.locale;
if (language == 'en') {this.newItemList.forEach((item,index) => {console.log()if (index === 0){Vue.set(item, 'lable', 'Main Information');}});}if (language == 'zh') {this.newItemList.forEach((item,index) => {if (index === 0){Vue.set(item, 'lable', '主信息');}});}

4.初始化写完,就该写监听了

watch: {'$i18n.locale'(val) {// 当语言变化时修改 isShow为falseif (val == 'en') {this.newItemList.forEach((item,index) => {console.log()if (index === 0){Vue.set(item, 'lable', 'Main Information');}});}if (val == 'zh') {this.newItemList.forEach((item,index) => {if (index === 0){Vue.set(item, 'lable', '主信息');}});}}},

5.我得业务逻辑是,更改第一个下标 index为0的才进行判断,更改为主信息,这是我得业务逻辑,其他的不需要进行更改。在初始化,更改一次,然后切换中英文监听的时候修改一次,特此记录。

自己研究一个小时没弄明白,问下同事十分钟搞定了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/230614.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

动能方案 | 技术引领未来:两轮电动车遥控解锁方案探秘

随着电动交通工具的快速普及,创新性的智能解锁系统正在为两轮电动车带来更便捷、安全的使用体验。本文将深入介绍一种先进的两轮电动车遥控解锁方案,探讨其优势,并推荐一款先进的芯片技术,引领行业未来。 01方案介绍 1、技术原…

短剧成为今年最火赛道,短剧分销系统怎么开发?

近两年来是短剧的爆发期,迎来了飞速发展阶段,也成为了2023年最赚钱的赛道。再这样的发展下,短剧行业吸引了无数人进入市场。 目前,短剧变现的方式主要有两个,一种是拍短剧,就是成为导演或者演员&#xff1…

分享5款简单而高效的小工具

​ 在这个繁忙的时代,简单而高效的工具成为生活和工作中的宝贵助手。以下是五款小巧而实用的小工具,或许正是你所需的生活小搭档。 1.远程终端——MobaXTerm ​ MobaXTerm是一款集成了多种网络工具的远程终端软件,可以通过SSH、Telnet、RDP…

解读远程工作设计师之未来与发展

引言 在数字化的浪潮下,“远程工作”已经成为现代职场的一个重要趋势。对于设计师来说,这不仅是一种工作方式的转变,更是职业发展的新机遇。在这篇文章中,我将从以下9个方面,深入探讨远程工作设计师的机会、市场和职位…

WordPress主题 响应式个人博客主题Kratos源码

Kratos 是一款专注于用户阅读体验的响应式 WordPress 主题,整体布局简洁大方,针对资源加载进行了优化。 Kratos主题基于Bootstrap和Font Awesome的WordPress一个干净,简单且响应迅速的博客主题,Vtrois创建和维护, 主…

RHEL8_Linux_Ansible常用模块的使用

本章主要介绍Ansible中最常见模块的使用 shell模块文件管理模块软件包管理模块服务管理模块磁盘管理模块用户管理模块防火墙管理模块 ansible的基本用法如下。 ansible 机器名 -m 模块x -a "模块的参数" 对被管理机器执行不同的操作,只需要调用不同的模块…

Python三级 每周练习题31

如果你感觉有收获,欢迎给我微信扫打赏码 ———— 以激励我输出更多优质内容 练习一: 作业1:编写程序,在下面的字典中找出身高137的同学并输出姓名,如果没找到, 输出没有 a{‘小赵’:136,‘小钱’:141,‘小孙’:146,‘小李’:13…

Gateway网关-路由的过滤器配置

目录 一、路由过滤器 GatewayFilter 1.1 过滤器工厂GatewayFilterFactory 1.2 案例给所有进入userservice的请求添加一个请求头 Truthitcastis freaking awesome! 1.3 案例给所有请求添加一个请求头 Truthitcastis freaking awesome! 一、路由过滤器 …

一级浪涌保护器的行业应用解决方案

一级浪涌保护器是防雷系统中最重要的一环,它主要用于建筑物总配电柜、低压变压器进线柜等位置,防止浪涌电压直接从外部传导进入内部,使系统设备免遭雷击损坏。一级浪涌保护器的规范要求、应用、作用和原理以及国标,本文将分别进行…

C++——STL标准模板库——容器详解——string

一、基本概念 string本质是一个类,封装了c风格字符串(以\0结尾的字符数组),具备自动管理内存功能,提供了多种构造函数和多种删查增改的成员方法。string的本质特点归结以下几点: 1、动态数组:…

ubuntu上strace下载编译

下载 Releases strace/strace GitHub 编译 ./configure \--enable-mpersnomake sudo make install

OpenShift与Rancher

Rancher的部署 一、系统初始化 1&#xff09;设置IP地址和主机名称 hostnamectl set-hostname rancher 2&#xff09;添加地址解析和开启路由转发 cat >>/etc/hosts<<EOF 192.168.180.210 rancher 192.168.180.200 node1 192.168.180.190 node2 EOF vim/et…

完整的vite + ts + vue3项目,克隆就能用,傻瓜式保姆教程(第二篇)

目录 前言 一、基础知识准备 1.1 接口请求 &#xff08;本篇重点内容&#xff09; 1.1.1 Fetch API 1.1.2 XMLHttpRequest 1.1.3 axios&#xff08;推荐&#xff09; 1.1.4 EventSource 1.1.5 WebSocket 1.2 ts 类型定义 &#xff08;本篇内容&#xff09; 1.3 svg 雪…

java 图片裁剪与合并

前言 在使用阿里云人数检测时&#xff0c;为降低成本&#xff0c;我们需要将两个图片合并成一张图片&#xff0c;提交给阿里云图像识别&#xff0c;但我发现识别时由于一些感染因素&#xff0c;会有一定的错误率&#xff0c;所以就需要将图片进行裁剪后再拼接。 具体操作逻辑…

BearPi Std 板从入门到放弃 - 先天神魂篇(3)(RT-Thread I2C设备 读取光照强度BH1750)

简介 使用BearPi IOT Std开发板及其扩展板E53_SC1&#xff0c; SC1上有I2C1 的光照强度传感器BH1750 和 EEPROM AT24C02&#xff0c; 本次主要就是读取光照强度; 主板: 主芯片: STM32L431RCT6LED : PC13 \ 推挽输出\ 高电平点亮串口: Usart1I2C使用 : I2C1E53_SC1扩展板 : LE…

约束系数的四舍五入引起的模型数值问题

在数学模型的求解当中&#xff0c;常常会出现各式各样的数值问题&#xff0c;包括模型的求解结果不稳定、产生不合理的结果或者底层算法的表现与收敛性都不符合预期等问题&#xff0c;引起这些问题的原因很多种&#xff0c;其中&#xff0c;在建模时&#xff0c;对约束系数的精…

基于网络爬虫技术的网络新闻分析

目录 前言 一、网络爬虫技术 二、代理IP 三、网络新闻分析 总结&#xff1a; 前言 随着互联网的发展和普及&#xff0c;网络新闻成为人们获取信息的重要途径。然而&#xff0c;由于网络新闻的数量庞大&#xff0c;分析和处理这些新闻变得愈发困难。本文将介绍如何使用网络…

竞赛保研 python的搜索引擎系统设计与实现

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; python的搜索引擎系统设计与实现 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;5分创新点&#xff1a;3分 该项目较为新颖&#xff…

冥想第一千零九天

1.周日&#xff0c;今天睡到自然醒&#xff0c;媳妇嫌弃在家里太闷了&#xff0c;让后去公园转了一圈我跑了6公里&#xff0c;心率很高&#xff0c;好在稳定&#xff0c;晚上给溪溪桐桐拼了拼图。给溪溪刷了鞋子。※ 2.早上给溪溪桐桐领了巧克力。 3.感谢父母&#xff0c;感谢朋…

代码随想录算法训练营第55天| 392.判断子序列 115.不同的子序列

JAVA代码编写 392.判断子序列 给定字符串 s 和 t &#xff0c;判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些&#xff08;也可以不删除&#xff09;字符而不改变剩余字符相对位置形成的新字符串。&#xff08;例如&#xff0c;"ace"是"…