Vue-select, how-to get $request value in Laravel's controller?

Hi everyone,

Need some help. I am using Laravel 5.4.

Currently I have a standard select dropdown from Laravel Collection as below.

<div class="col-xs-6 form-group{{ $errors->has('product') ? ' has-error' : '' }}">
	<label class="control-label">Product</label>
	{!! Form::select('product', $products, null, ['class' => 'form-control', 'placeholder' => 'Pick a product...']) !!}
	@if ($errors->has('product'))
		<span class="help-block">
			<strong>{{ $errors->first('product') }}</strong>
		</span>
	@endif
</div>

In Laravel, I can get the request for the above using this

$request->product

But when I use your vue-select component

e.g.

<div class="row">
	<div class="col-xs-4">
		<v-select :options="products" :placeholder="placeholder"></v-select>
	</div>
</div>

How can I get the $request value for this field in Laravel controller?

Plus how can I validate vue-select if no value is selected?

Any help? Thanks.

[sagalbot]

@ericmachine88, if you’re not submitting your form via ajax, then you’ll have to use a hidden input. vue-select doesn’t contain an actual form input, but you can easily sync the selected option to a hidden input.

<div class="row">
  <div class="col-xs-4">
    <input type="hidden" v-model="product">
    <v-select v-model="product" :options="products" :placeholder="placeholder"></v-select>
  </div>
</div>

new Vue({
  data: {
    product: null,
    products: [],
    placeholder: null
  }
})

If you’re using vue-validator, you will want to validate the hidden input, not vue-select. On the Laravel side of things, you can just validate the product field as you normally would:

$rules = [
  'product' => 'required'
]

[sagalbot]

@ericmachine88 didn’t realize vue-validator wasn’t going to have support for v2. I’m sure someone else will build it though if it’s not already out there.

If you get creative with it, there are other ways. I just put together this example that uses a hidden text input to add the required HTML5 attribute.