如何将变量从js传递给pug答案

【问题标题】：How to pass variable from js to pug如何将变量从js传递给pug
【发布时间】：2021-12-31 03:13:43
【问题描述】：

我的问题是我似乎无法修改 pug 文件用于循环的变量。

section.p-0.md-p-5.muli
    .flex.flex-wrap
      script.
        var users2 = '#{users}';
        console.log(users2);
        /*
        const searchBar = document.getElementById('searchBar');
        searchBar.addEventListener('keyup', (e) => {
          const search = e.target.value;
          const filteredFiles = users2[0].filter(user => {
            return user.toString[0][0].includes(search);
          })
          console.log(filteredFiles);
        });
        */
      each user in users2
        .w-100pc.md-w-33pc.p-10
          a.block.no-underline.p-5.br-8.hover-bg-indigo-lightest-10.hover-scale-up-1.ease-300.filePage(href=`/${user.slug}`)
            img.w-100pc(src=`${user.photoUrl[0]}` alt='')
            p.fw-600.white.fs-m3.mt-3
              | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed…
            .indigo.fs-s3.italic.after-arrow-right.my-4 3 days ago by Jeff

在第 3 行中，我有一个脚本标记，用于设置传入的对象数组。比我想修改这些对象并将新的过滤数组传递给第 16 行的循环。但是，我不知道如何将变量从第 4 行传递到第 16 行。当我运行代码时，我收到错误“无法读取属性未定义的“长度”。有想法该怎么解决这个吗？谢谢。

【问题讨论】：

标签： javascript html node.js pug

【解决方案1】：

在任何时候，您都必须非常清楚服务器上有什么，客户端上有什么。

服务器（即 Pug）计算并生成 Html 输出。在这个服务器阶段，不存在浏览器。使用的任何变量都是服务器上的变量。

当用户启动浏览器访问您的页面时，浏览器会接收到上面生成的 Html 输出，然后其中的任何脚本命令都会在浏览器中运行。此时不存在哈巴狗。

users2，包含在<script> 块中，是客户端变量。 Pug 运行时它不存在。

users 是服务器端变量，因此可用于 Pug 代码。

您收到的错误消息可以通过一个简单的更改来修复：each user in users。

//-Your `users` object is a SERVER variable.

script.
  var users2 = '#{users}';
  console.log(users2);
  //-The above, other than the substitution of #{users}, DO NOT RUN AT THE SERVER

//-The below runs ONLY at the server, thus object `users` is available
section.p-0.md-p-5.muli
  .flex.flex-wrap
    each user in users
      .w-100pc.md-w-33pc.p-10
        a.block.no-underline.p-5.br-8.hover-bg-indigo-lightest-10.hover-scale-up-1.ease-300.filePage(href=`/${user.slug}`)
        img.w-100pc(src=`${user.photoUrl[0]}` alt='')
        p.fw-600.white.fs-m3.mt-3
          | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed…
        .indigo.fs-s3.italic.after-arrow-right.my-4 3 days ago by Jeff

幸运或不幸的是，您没有为客户端变量使用完全相同的名称。它可能会让你彻底迷惑，也可能完全启发你。例如，您可以编写以下内容，它仍然可以正常工作：

script.
  let users = '#{users}';
  console.log(users);

section
  each user in users
    img(src=user.photoUrl[0])

好的，现在您需要修改users。如果您想让客户端修改它，然后返回 Pug 以使用更新后的值，则不能。浏览器收到 Html 输出后，会断开与服务器的连接。同样，当 Pug 生成 Html 输出时，浏览器不存在。 Pug 引擎和浏览器的 Javascript 引擎之间是零交互的！

您的客户端代码中被注释掉的代码并未显示您要如何修改users。客户端上有哪些附加信息需要您在浏览器而不是服务器上进行修改？是因为您需要（人类）用户输入吗？您应该发布另一个问题来描述您想要的浏览器和服务器之间的交互。答案可能需要 Ajax 调用或表单提交。

【讨论】：