背景

商家反馈，某个页面的列表数据错乱了，并且列表展示了很多条数据，但是标题写的是当前有 0 条数据。本地无法复现，于是联系了商家远程。

检查了后端接口，返回数据是正常的。
检查了 Chrome 版本，是最新版本。
检查了控制台，无任何报错。
重新理了代码的逻辑，一切正常

当一切陷入瓶颈的时候，检查了一下 html 标签，发现多出了很多 font 标签，但代码从来没有写过 <font></font> 这种标签。谷歌搜索「多出 font 标签」，有很多人中招，问题最终解决。

复现

这里写一个 demo ，复现一下上边的错误，通过 Vue 演示，

直接通过 <script> 引入 Vue.js，然后简单的展示一个数字，通过一个 button 将数字改为 6 。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>测试demo</title>
  </head>
  <body>
    <div id="app">
      {{ message }}<br />
      {{ num }}条数据
      <div
        @click="setNum"
        style="
          border: 1px solid red;
          width: 80px;
          cursor: pointer;
          text-align: center;
        "
      >
        得到数量
      </div>
    </div>
  </body>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "Hello Vue!",
        num: 0,
      },
      methods: {
        setNum() {
          console.log('click');
          this.num = 6;
        },
      },
    });
  </script>
</html>

界面就是下边的样子。

当我们点击「得到数量」，很明显 0 就会变成 6。

一切都是这么正常，但如果用户的 Chrome 在设置 -> 高级 -> 语言，勾选了「询问是否翻译非您所用语言的网页」，如下图。

然后再打开刚才写的 demo，Chrome 就会提示用户是否要翻译当前网页，如下图。

如果用户把「一律翻译英语」进行了勾选，开始的时候不会有什么异常。

但用户一旦刷新页面，或者重新打开这个网页，此时再点击「得到数量」，会发现我们再也得不到数量了。

点击了 13 次，但 0 永远是 0。

原因分析

根本原因就是 Chrome 翻译的时候，会在所有的文本外层包一个 <font> 标签。

右键查看源代码，发现元素并没有变化。

检查元素的话，就会发现端倪了。

由于 dom 树的变化，vue 之前绑定的 dom 发生了改变，但这个是浏览器直接改的， vue 并不知道，所以设定值的时候就无法设置成功了。

解决方案

最快方案

让用户选择「一律不翻译此网站」。

然后用户刷新页面，就一切恢复正常了。

根治方案

如果不弹出翻译的选项，用户就没有选择的机会，也就不会出问题了。有两种方式。

改浏览器的设置，也就是文章开头的图片。将「询问是否翻译非您所用语言的网页」取消勾选。

改代码，想一下为什么会弹出这个翻译的选项？

我们一般会默认生成下边的 html 模版。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>