How to pass values to vue data from laravel blade?

Question

I am using Vue.js with Axios to post my data. But Axios returns NULL from my Laravel Controller. Input text is empty when using v-model (update form - blade laravel).

Pretty new to this awesome framework. I need to make an AJAX call for a text input in an update form (blade laravel), however in the form the input is blank and I’m having trouble to figure out if I’m missing something.

Question:

How do I send the input value from the blade template when the form is loaded to the Vue data instance

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

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

There are a few ways, but one would be to json_encode the object or array, as shown below. I ususally set a global object and then grab that in my Javascript, but you could technically set this value directly to a JS variable. Use @php and @endphp if you want more blade-like syntax.

<!-- 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>