Laravel10中JS追加Blade代码时如何正确使用old()函数

核心思路 #

Blade的{{ old() }}是服务器端渲染语法，没法在客户端JavaScript代码里直接动态拼接调用。既然你已经通过@json(old('reward'))拿到了旧奖励数组，直接在JS里用这份数据做匹配即可，不用再尝试在动态生成的HTML里嵌套Blade语法。

具体实现步骤 #

1. 传递旧数据到JS变量
   在Blade视图里把旧数据转成JS可识别的对象：

<script>
    // 把服务器端的旧奖励数据存入JS变量，空数组作为默认值
    const oldRewards = @json(old('reward', []));
</script>

2. 修改addMoreItem()函数，动态回填旧值
   生成新表单元素时，根据当前key从oldRewards里取对应数据，没有的话用默认值：

function addMoreItem(key) {
    // 根据key获取对应旧数据，无数据则返回空对象
    const oldItem = oldRewards[key] || {};
    
    // 动态生成表单HTML，用JS变量填充value
    const newItem = `
        <div class="reward-item">
            <input type="text" 
                    name="reward[${key}][reward_owner_name]" 
                    value="${oldItem.reward_owner_name || ''}" 
                    placeholder="奖励归属人">
            <!-- 其他字段按同样逻辑处理 -->
            <button type="button" onclick="removeItem(${key})">删除</button>
        </div>
    `;
    
    // 将新元素追加到容器中
    document.getElementById('rewards-container').insertAdjacentHTML('beforeend', newItem);
}

3. 初始化渲染旧数据条目
   页面加载时自动渲染所有旧奖励条目：

document.addEventListener('DOMContentLoaded', function() {
    // 有旧数据则渲染所有条目
    if (oldRewards.length > 0) {
        oldRewards.forEach((_, index) => {
            addMoreItem(index);
        });
    } else {
        // 默认渲染一条空表单
        addMoreItem(0);
    }
});

注意事项 #

• XSS风险防范：如果旧数据包含特殊字符（如<、"），直接用模板字符串拼接会有安全问题，建议用encodeURIComponent()转义后再赋值：

  const escapedOwnerName = oldItem.reward_owner_name ? encodeURIComponent(oldItem.reward_owner_name) : '';
  // 赋值时解码
  value="${decodeURIComponent(escapedOwnerName)}"
  

• 索引连续性：删除条目后要重新整理表单name属性的索引，避免提交时数组索引断层（比如删除索引1后，剩下0和2，服务器会把2当成第三个元素，中间的1会丢失）。

内容的提问来源于stack exchange，提问作者Akirah A.