Laravel Blade判断外部JS变量值时Undefined variable错误的解决求助

我是Laravel、Blade及PHP的新手，但熟悉JavaScript。我已掌握Blade的@if/@else语句用法，编写了外部script.js文件，代码如下：

function randomNumber(min, max) {
    return Math.floor(Math.random() * ((max + 1) - min) + min);
}

const randomHero = randomNumber(1, 2);

console.log(randomHero);

该脚本会生成1到2之间的随机数并存储在randomHero变量中。随后我在index.blade.php中尝试通过@if判断randomHero的值，以此引入不同组件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage</title>
  <link href="{{asset('css/style.css')}}" rel="stylesheet">
    
</head>
<body>
  <section id="main">
    @if(randomHero === 1)         
        @include('components.Hero1')   
    @else
        @include('components.Hero2')   
    @endif        
    </section>
</body>
<script src="{{ asset('js/script.js')}}"></script>
</html>

但一直报错“Undefined variable randomHero”，想请教是缺少将JS变量传递到Blade的步骤，还是变量调用方式有误？

核心问题 #

Blade模板是服务端渲染的，服务器会先执行完所有@开头的指令，生成静态HTML后再发送给浏览器；而你的JavaScript代码是客户端执行的，要等浏览器拿到HTML后才会运行。两者执行顺序完全相反，Blade判断@if时，randomHero这个JS变量还没生成，自然会报“未定义变量”的错误。

方案一：后端生成随机数（推荐，适合需要SEO的场景） #

直接在Blade里用PHP生成随机数，服务端渲染时就能直接判断：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage</title>
  <link href="{{asset('css/style.css')}}" rel="stylesheet">
    
</head>
<body>
  <section id="main">
    @php
        $randomHero = rand(1, 2); // PHP内置函数生成1-2的随机整数
    @endphp
    @if($randomHero === 1)         
        @include('components.Hero1')   
    @else
        @include('components.Hero2')   
    @endif        
    </section>
</body>
<script src="{{ asset('js/script.js')}}"></script>
</html>

这样服务端会直接生成对应组件的HTML，无需依赖客户端JS。

方案二：客户端JS动态切换组件（适合不需要SEO的场景） #

如果必须用JS生成随机数，可先加载两个组件并隐藏，再通过JS控制显示：

1. 修改index.blade.php：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage</title>
  <link href="{{asset('css/style.css')}}" rel="stylesheet">
  <style>
    .hero-component { display: none; }
  </style>
</head>
<body>
  <section id="main">
    <div id="hero1" class="hero-component">
        @include('components.Hero1')
    </div>
    <div id="hero2" class="hero-component">
        @include('components.Hero2')
    </div>
  </section>
</body>
<script src="{{ asset('js/script.js')}}"></script>
</html>

2. 修改script.js：

function randomNumber(min, max) {
    return Math.floor(Math.random() * ((max + 1) - min) + min);
}

const randomHero = randomNumber(1, 2);
console.log(randomHero);

// 显示对应组件
document.getElementById(`hero${randomHero}`).style.display = 'block';

内容的提问来源于stack exchange，提问作者Chobbit