Php 如何将值从laravel blade传递到vue数据？

我正在使用Vue.js和Axios发布我的数据。但是Axios从我的Laravel控制器返回NULL。使用

v型时，输入文本为空（更新表单-blade laravel）

这是一个非常棒的框架。我需要对更新表单（blade laravel）中的文本输入进行AJAX调用，但是表单中的输入是空白的，我很难确定是否遗漏了什么

问题：

当表单加载到Vue数据实例时，如何从blade模板发送输入值

刀片：

{!! Form::open(['url' => '','class'=>'form-horizontal', 'id'=>'smv-cost-form','enctype'=>'multipart/form-data']) !!}
{!! Form::hidden('trans_id_d','36', ['class' => 'custom-input-bom','readonly'=>'readonly']) !!}

   <tr id="smvCostAdd">
      <td colspan="2">
         {!! Form::text('knittingCost','',['class'=>'input-custom form-control','id'=>'knittingCost','v-model'=>'smvCostModel.knittingCost']) !!}
         <p class="error" v-if="knittingCost_error">@{{knittingCost_error}}</p>
      </td>
      <td colspan="2">
         {!! Form::text('linkingCost','',['class'=>'input-custom form-control','id'=>'linkingCost','v-model'=>'smvCostModel.linkingCost']) !!}
         <p class="error" v-if="linkingCost_error">@{{linkingCost_error}}</p>
      </td>
      <td colspan="2">
         {!! Form::text('tremingCost','',['class'=>'input-custom form-control','id'=>'tremingCost','v-model'=>'smvCostModel.tremingCost']) !!}
         <p class="error" v-if="tremingCost_error">@{{tremingCost_error}}</p>
      </td>
      <td colspan="2">
         {!! Form::text('mendingCost','',['class'=>'input-custom form-control','id'=>'mendingCost','v-model'=>'smvCostModel.mendingCost']) !!}
         <p class="error" v-if="mendingCost_error">@{{mendingCost_error}}</p>
      </td>
      <td colspan="2">
         {!! Form::text('washCost','',['class'=>'input-custom form-control','id'=>'washCost','v-model'=>'smvCostModel.washCost']) !!}
         <p class="error" v-if="washCost_error">@{{washCost_error}}</p>
      </td>
      <td colspan="2">
         {!! Form::text('pcqCost','',['class'=>'input-custom form-control','id'=>'pcqCost','v-model'=>'smvCostModel.pcqCost']) !!}
         <p class="error" v-if="pcqCost_error">@{{pcqCost_error}}</p>
      </td>
      <td>
         {!! Form::text('ironCost','',['class'=>'input-custom form-control','id'=>'ironCost','v-model'=>'smvCostModel.ironCost']) !!}
         <p class="error" v-if="ironCost_error">@{{ironCost_error}}</p>
      </td>
      <td>
         {!! Form::text('sewingCost','',['class'=>'input-custom form-control','id'=>'sewingCost','v-model'=>'smvCostModel.sewingCost']) !!}
         <p class="error" v-if="sewingCost_error">@{{sewingCost_error}}</p>
      </td>
      <td>
         {!! Form::text('packingCost','',['class'=>'input-custom form-control','id'=>'packingCost','v-model'=>'smvCostModel.packingCost']) !!}
         <p class="error" v-if="packingCost_error">@{{packingCost_error}</p>
      </td>
      <td></td>
      <td>{!! Form::button('Save', ['class' => 'btn btn-primary', 'v-on:click.prevent'=>'saveSMVcost();'] ) !!}</td>
   </tr>
{!! Form::close() !!}

saveSMVcost: function () {
   /*var request = new XMLHttpRequest();*/
   var form = document.querySelectorAll("#smv-cost-form");
   var formData = new FormData(form);
   var base_url = window.location.origin;
   var page_url = base_url + '/bca/smv-cost-action';

   $('#ajax-call-effect').show();

   console.log(formData.knittingCost);
   alert(formData.knittingCost);

   axios.post(page_url, formData).then(
       function (response) {
          $('#ajax-call-effect').hide();

          if (response.data.errors) {
              response.data.errors.knittingCost ? app.knittingCost_error = response.data.errors.knittingCost[0] : app.knittingCost_error = '';
              response.data.errors.linkingCost ? app.linkingCost_error = response.data.errors.linkingCost[0] : app.linkingCost_error = '';
              response.data.errors.tremingCost ? app.tremingCost_error = response.data.errors.tremingCost[0] : app.tremingCost_error = '';
              response.data.errors.mendingCost ? app.mendingCost_error = response.data.errors.mendingCost[0] : app.mendingCost_error = '';
              response.data.errors.washCost ? app.washCost_error = response.data.errors.washCost[0] : app.washCost_error = '';
              response.data.errors.pcqCost ? app.pcqCost_error = response.data.errors.pcqCost[0] : app.pcqCost_error = '';
              response.data.errors.ironCost ? app.ironCost_error = response.data.errors.ironCost[0] : app.ironCost_error = '';
              response.data.errors.sewingCost ? app.sewingCost_error = response.data.errors.sewingCost[0] : app.sewingCost_error = '';
              response.data.errors.packingCost ? app.packingCost_error = response.data.errors.packingCost[0] : app.packingCost_error = '';
           }
           else {
              /* $('#knittingCost').val('');
              $('#linkingCost').val('');
              $('#tremingCost').val('');
              $('#mendingCost').val('');
              $('#washCost').val('');
              $('#pcqCost').val('');
              $('#ironCost').val('');
              $('#sewingCost').val('');
              $('#packingCost').val('');*/
              app.knittingCost_error = '';
              app.linkingCost_error = '';
              app.tremingCost_error = '';
              app.mendingCost_error = '';
              app.washCost_error = '';
              app.pcqCost_error = '';
              app.ironCost_error = '';
              app.sewingCost_error = '';
              app.packingCost_error = '';
              app.showNotification('top', 'center', response.data.status, response.data.message);
           }
        })
     }

有几种方法，但其中之一是对对象或数组进行
json\u编码，如下所示。我通常会设置一个全局对象，然后在Javascript中获取它，但从技术上讲，您可以直接将该值设置为JS变量。如果需要更多类似刀片的语法，请使用
@php
和
@endphp

<!-- Global App Object -->
<script>
    window.App = <?php echo json_encode(
        'isAdmin'            => user()->isAdmin(),
        'credentials'        => user()->softphone()->credentials(),
        'forwardToCellphone' => user()->forward_to_cellphone,
        'status'             => (new App\Http\Controllers\Users\UserStatusController)->details(),
    ); ?>;
</script>


window.App=；
您可以将数据作为道具传递到vue组件。您可以在本文中找到示例：