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

[ericmachine88]

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.

[brandenwagner]

$products is a php variable.
:options="products" is looking for a VueJS/Javascript variable.

So you need to populate the vuejs variable with that information
to hard code it for testing:

<script>
   var products = ['product 1', 'product 2', 'product 3']
</script>

to put it in one of your blade templates

<script>
   var products = {{ $products }}
</script>

My answer wasnt extremely descriptive but im hoping that is enough to point you in the right direction

[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'
]

[ericmachine88]

Thanks, I will give that a test :)

[sagalbot]

I will close this, but feel free to ask any more questions you may have.

[ericmachine88]

By the way, I don't think vue-validator will work for vue 2
https://github.com/kazupon/vue-validator

Is that the only way to validate if no one selects any value from vue-select?

[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.

[ericmachine88]

Thanks so much

[ericmachine88]

I know this can be a lil off topic. But I can't find where or how to style vue-select? I am using Bootstrap v3, and the vue-select default styling doesn't blend in nicely. Any docs which I can refer to? Thanks.

[BobbyBorisov]

hey @sagalbot i have one question -> when selected is object and i try to make this

value of response('product') is just the string "[object Object]" . do you know how to fix it? i want to pass whole object to hidden input. I found a workaround but dont know if its good or not. i made default value of 'selected' to be 'select something' and for v-model i am passing selected.id