Boostrap Vue & Vue - Load Form-Select with array

Question

I'm working in a Laravel + Vue project. Initially I need to load a Vue component data from the view of Laravel. The idea is send by Prop parameter an array object with this data and from Vue component to load a Html Select element.

Unfortunately it's doesn't work. I'm new in Vue :(

From testing I want to load this Vue component send and static array: ['Customer1', 'Customer2'], I'm not send a variable array as for example {{ $customers }}. The goal will be send a variable from Laravel but for testing not.

I have made this html:

<div class="card-body">
    <create-task-jobs v-bind:customers="['Customer1', 'Customer2']">
    </create-task-jobs>
</div>

From bootstrap-vue I want to load a Select component(create-task-jobs) from array by Prop(v-bind:customers) parameter.

The code of my Vue component is:

<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: [this.customers]
      }
    }
  }
</script>

The current result is wrong because there is only an option separated by comma:

... but the correct behavior would be two option elements:

-> Customer1 -> Customer2

Please Could you help me with this issue?

Thanks.

Nilesh Patel Nilesh Patel · Accepted Answer · 2021-01-19T10:07:14

You needs to use spread operator.

data() {
      return {
        form: {
          customer: null,
        },
        customers_load: [...this.customers] 👈
      }
}

Boostrap Vue & Vue - Load Form-Select with array

1 Answers