Bootstrap Vue & Vue - 使用数组加载表单选择

Posted 2023-02-22

【中文标题】Bootstrap Vue & Vue - 使用数组加载表单选择

【英文标题】：Boostrap Vue & Vue - Load Form-Select with array

【发布时间】：2021-04-23 14:24:14

【问题描述】：

我在一个 Laravel + Vue 项目中工作。最初我需要从 Laravel 的视图中加载一个 Vue 组件数据。这个想法是通过 Prop 参数发送一个包含此数据的数组对象，并从 Vue 组件中加载一个 html Select 元素。

不幸的是，它不起作用。我是 Vue 的新手 :(

从测试中我想加载这个 Vue 组件发送和静态数组：['Customer1', 'Customer2']，我没有发送变量数组，例如 $customers 。目标是从 Laravel 发送一个变量，但不是为了测试。

我已经制作了这个html：

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

从 bootstrap-vue 我想通过 Prop(v-bind:customers) 参数从数组中加载一个 Select 组件（create-task-jobs）。

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

当前结果是错误的，因为只有一个逗号分隔的选项：

...但正确的行为应该是两个选项元素：

-> 客户1 -> 客户2

请问您能帮我解决这个问题吗？

谢谢。

【参考方案1】：

您需要使用spread 运算符。

data() 
      return 
        form: 
          customer: null,
        ,
        customers_load: [...this.customers] ?