javascript - 将动态 bool 属性传递给 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 选择组件，但是我想知道如何传递 bool 属性 multiple, attach, chips到 select 元素作为数据属性，因此它们不必在组件声明中明确指定。
例如:我要添加 Prop : multiple, attach, chips在数据数组元素 booleanProperties 中定义同时仍然能够在不指定组件的情况下定义组件。这样它就可以动态地为我传递的任何 Prop 工作。
类似于以下伪代码示例的内容。

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

如何传递/指定数据 Prop : multiple, attach, chips动态为 v-select元素？
这是我所指的代码示例。
https://codepen.io/deftonez4me/pen/NWRLWKE

Answer 1

您可以简单地使用 v-bind不指定键/属性，然后将对象传递给它，即 v-bind="additionalProps" .根据 VueJS v2 documentation on v-bind :

When used without an argument, can be used to bind an object containing attribute name-value pairs.

您也可以合并您的 items绑定(bind)到 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>