从视图 Laravel 加载数组到 Vue 组件

Question

我有一个新项目，我想从 Laravel 的角度在 Vue 组件中加载一个数组。

对于 testint，我有相同的 html 元素 SELECT，通过两种方式创建：Laravel 和 Vue 组件。

html 代码：

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

Vue 组件代码：

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

组件中的数组是 null 我不确定会发生什么。

更新：

阵列 object dd：

谢谢！

Answer 1

试试这个，改动不大，

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

因为它不会生成键值对。 dd $customers你会明白的