将动态布尔属性传递给 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 中定义的道具：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"。根据VueJS v2 documentation on v-bind：

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

您还可以将 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
        }
}