Load array from view Laravel to Vue component

Question

I have a new project and I want to load in a Vue Component an array from view of Laravel.

For testint I have the same html element, SELECT, created by two ways: Laravel and Vue Component.

The html code:

     <!-- Laravel SELECT Element -->

     <div class="form-group">
         <label for="customer">Client</label>
               <select 
                      name="customer"
                      class="form-control @error('customer')
                          is-invalid
                      @enderror"
                      id="customer">
                            <option value="">-- Seleciona -</option>
                                 @foreach($customers as $customer)
                                      <option 
                                            value="{{ $customer->id }}" 
                                            {{ old('customer') == $customer->id ? 'selected' : '' }}>{{ $customer->customer_name }}</option>
                                 @endforeach
               </select>
               
               @error('customer')
                     <span class="invalid-feedback d-block" role="alert">
                           <strong>{{$message}}</strong>
                     </span>
               @enderror
    </div>
    
    <!-- End Laravel SELECT Element -->



    <!-- Vue Component SELECT Element -->

    <create-task-jobs v-bind:customers={{ json_encode($customers) }}>
                            
    </create-task-jobs>

    <!-- End Vue Component SELECT Element -->

The Vue Component code:

<template>
  <div>
    <form @submit.prevent="agregar">
      <h3>Afegir Tasques</h3>
            <b-form-group id="input-group-3" label="Client" label-for="input-3">
                <b-form-select
                id="input-3"
                v-model="form.customer"
                :options="customers_load"
                required
                ></b-form-select>

            </b-form-group>

      <button class="btn btn-primary" type="submit">Agregar</button>
      
    </form>
  </div>

  
</template>

<script>
  export default {
    props: {
      customers: Array
    },
    data() {
      return {
        form: {
          customer: null,
        },
        customers_load: [{ text: 'Select One', value: null },...this.customers]
      }
    }
  }
</script>

The SELECT in Laravel works fine, show the customer_name and the id correctly but the problem is in the Vue Component the values of the SELECT are null:

The array into the component is null and I don't sure what is happen.

UPDATED:

Array object dd:

Thanks!

Answer 1

Try this one with little changes,

<create-task-jobs v-bind:customers={{ json_encode($customers->pluck('customer_name', 'id')) }}></create-task-jobs>

As it will not make key value pair. You will understand it by dd $customers