Boostrap Vue & Vue - Load表单-与数组一起选择
Boostrap Vue & Vue - Load表单-与数组一起选择
提问于 2021-01-19 09:44:32
我在一个Laravel + Vue项目里工作。最初，我需要从Laravel的视图加载Vue组件数据。其思想是通过Prop参数发送带有此数据的数组对象，并从Vue组件中发送一个Html Select。
不幸的是它不起作用。我在Vue是新来的
通过测试，我希望加载这个Vue组件send和静态数组：‘Customer2 1’，‘Customer2 2’，我不发送变量数组，例如{{ $customers }。目标将是从Laravel发送一个变量，但不用于测试。
我制作了这个html：
<div class="card-body">
<create-task-jobs v-bind:customers="['Customer1', 'Customer2']">
</create-task-jobs>
</div>通过引导-vue，我想通过Prop(v-bind:customers)参数从数组加载一个Select组件(创建-任务-作业)。
my 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>当前的结果是错误的，因为只有一个用逗号分隔的选项：
..。但正确的行为将是两个选项元素：
-> Customer1 -> Customer2
请你帮我解决这个问题好吗？
谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-01-19 10:07:14
您需要使用spread操作符。
data() {
return {
form: {
customer: null,
},
customers_load: [...this.customers]
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65788911
复制相关文章
相似问题
腾讯云开发者
