有没有办法在 Laravel 刀片模板中使用 javascript 变量？答案

【问题标题】：Is there a way to use javascript variable inside Laravel blade template?有没有办法在 Laravel 刀片模板中使用 javascript 变量？
【发布时间】：2016-12-28 20:03:40
【问题描述】：

我将在 jQuery 中自动创建表格的行。通过单击 addRow 按钮，函数 addRow() 将如下所示：

function addRow(){

  var rowCount = $("table tr").length - 1; 
  var row = '<tr><td><input name=“item[‘+ (rowCount+1) + ']" type="text" value="{{ old(‘item') }}”> @if ($errors->has(‘item’)){{ $errors->first(‘item’) }}@endif<td></tr>' ;

 $("table").append(row);

}

我将调用此方法 5 次，它将创建 5 个名称为 item1 的输入区域。第 2 项，第 3 项，第 4 项，第 5 项。

在服务器端，我使用 Laravel 5.2 表单请求验证来验证每个输入字段。

但如果验证失败，旧的输入和错误将不会设置为正确的输入字段，因为

我无法将 javascript 变量 rowCount 放入刀片模板“{{ old(‘item') }}”中。同样是 {{ $errors->first('item') }}。

我试着这样写

'value="{{ old('giftValue[' . $rowCount .']') }}">'

还有这个

'value="{{ old('giftValue[' + $rowCount +’]’) }}">'

但不起作用。

有人有解决这个问题的好主意吗？

【问题讨论】：

你的结尾<td>标签不正确..

标签： jquery laravel laravel-5 laravel-blade

【解决方案1】：

执行 Ajax 调用以使用 javascript 进行路由和显示。像这样的：

    $.ajax({
              url: '/get-rows',
              data: { code: code }
            })
            .done(function(res) {
                var response = $.parseJSON(res);
                console.log(response);
                 var $id = $('<input type=hidden name=id />').val(res.id);
                 var $email = $('<input type=hidden name=email />').val(res.email);

            $('form[name="rows"]').append($id).append($email).submit();
            })
            .fail(function(err) {
              console.log('Error: ' + err.status);
        });

【讨论】：

【解决方案2】：

我会将输入创建为输入数组：

function addRow(){    
  var rowCount = $("table tr").length - 1; 
  var row = '<tr><td><input name=“items[]" type="text"></td></tr>';

  $("table").append(row);   
}

这可以在后端轻松验证。而且你不应该将服务器端代码添加到 JS，因为它不会工作。

在您看来，检查old 值是否存在，然后运行循环将items 添加回来。

@if(old('items'))
    @for($i=0;$i<=count(old('items'));$i++)
        <tr><td><input name=“items[]" type="text" value="old('items')[$i]"></td></tr>
    @endforeach
@endif

【讨论】：

【解决方案3】：

不确定这是否是正确的方法，但您可以尝试将错误和 oldInputs 存储在变量中并使用它。

下面的例子：

function addRow(){

  var errors = {
    item1:{{$errors->first('item1')}},
    item2:{{$errors->first('item2')}},
    item3:{{$errors->first('item3')}},
    item4:{{$errors->first('item4')}},
    item5:{{$errors->first('item5')}}
  }
  var rowCount = $("table tr").length - 1; 
  var row = '<tr>
                <td>
                    <input name=“item[‘+ (rowCount+1) + ']" type="text" value="{{ old(‘item') }}”> 
                    '+errors["item"+(rowCount+1)]+'
                </td>
            </tr>' ;

 $("table").append(row);

}

【讨论】：

【解决方案4】：

感谢所有回答我问题的人，但是 no answer可以同时解决Old Value和validation Error的问题。

最后，我写了 JS 代码，我也写了一个和 JS 几乎一样的服务器端代码。正如 Mina Abadir 所说，我不应该在 JS 中添加服务器端代码。

如果验证失败，我只在服务器端代码中渲染Old值和验证错误，这样，最困难的部分是我必须使用Validator::make将每个错误添加到variable($items[$key]['oldvalue'] and $items[$key]['error']) ，会在服务端代码中显示出来。

服务器端代码如：

@if(validation_failed) {
     <input name="item[{{ $key }}]" type="text" value="{{ $items[$key]['oldvalue'] }}">
     @if (!empty($items[$key]['error']))<p class="formTable_error">{{ $items[$key]['error'] }}</p>@endif
}

【讨论】：