How to pass values to vue data from laravel blade? - php

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>