Question

我在Axios上使用Vue.js发布数据。但是 Axios从我的Laravel控制器返回NULL 。使用v-model时输入文本为空（更新形式-刀片laravel）。

这个很棒的框架相当新。我需要以更新形式（刀片laravel）对文本输入进行AJAX调用，但是该形式的输入为空白，因此我无法确定是否缺少某些内容。

问题：

将表单加载到Vue数据实例后，如何从刀片模板发送输入值

刀片：

{!! 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() !!}

JS：

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);
           }
        })
     }

Answer 1

有几种方法，但是一种方法是json_encode对象或数组，如下所示。我通常设置一个全局对象，然后在我的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>

如何从Laravel Blade向Vue数据传递值？

1 个答案: