将动态布尔道具传递给VueJS组件

Question

如何使用VuetifyJS将动态属性附加到VueJS组件？

我有下面的VuetifyJS代码示例，它创建了一个选择字段元素：

<div id="app">
<v-app id="inspire" style="padding: 10px; ">
<v-select 
v-model="selectField"
:items="items" 
multiple attach chips>  
</v-select>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
selectField: '', 
items: [
'item1', 
'item2', 
'item3'
],
booleanProperties: [
'multiple', 
'attach', 
'chips'
]
}
},
})

这创建了一个功能性的VuetifyJS选择组件，但我想知道如何将布尔道具multiple, attach, chips作为数据属性传递给选择元素，这样就不必在组件声明中显式指定它们。

例如：我想添加在数据数组元素booleanProperties中定义的props:multiple, attach, chips，同时仍然可以在不指定它们的情况下定义组件。这样，它可以动态地为我通过的任何道具工作

类似于下面的伪代码示例。

<v-select 
v-model="selectField"
:items="items"
v-for="(booleanProperties) as boolProp">         
</v-select>

如何为v-select元素动态传递/指定数据道具：multiple, attach, chips？

以下是我所指内容的代码示例。https://codepen.io/deftonez4me/pen/NWRLWKE

Answer 1

您可以简单地使用v-bind，而无需指定键/属性，然后向其中传递一个对象，即v-bind="additionalProps"。根据v-bind:上的VueJS v2文档

在不带参数的情况下使用时，可用于绑定包含属性名称值对的对象。

为了简洁起见，您还可以将items绑定合并到additionalProps返回的对象中。示例基于您的代码。

new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
selectField: '', 
additionalProps: {
items: [
'item1', 
'item2', 
'item3'
],
multiple: true,
attach: true,
chips: true
}
}
}
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.16/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.16/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire" style="padding: 10px; ">
<v-select 
v-model="selectField"
v-bind="additionalProps">  
</v-select>
</v-app>
</div>

Answer 2

您可以简单地执行以下操作：

<div id="app">
<v-app id="inspire" style="padding: 10px; ">
<v-select 
v-model="selectField"
:items="items" 
:multiple="multiple"
:attach="attach"
:chips="chips">  
</v-select>
</v-app>
</div>

然后你可以像以前一样声明道具：

props: [
'multiple', 
'attach', 
'chips'
]

或者更具体一点，比如：

props: {
multiple: {
type: Boolean
},
attach: {
type: Boolean
},
chips: {
type: Boolean
}
}