Vuetify - 如何创建嵌套的多选框

Question

我尝试使用Vuetify创建一个多选框，允许用户选择header并选择header他们会选择那些孩子的所有内容。< / p>

Here is an example:如果您点击＆＃34;选择您所在的国家＆＃34;你会看到Europe但它现在只是一个标题。我想制作另一个复选框，如果选中则会选择欧洲以下的所有国家/地区。

到目前为止，我的代码是多选

<v-select
  label="Choose your Countries"
  :items="countries"
  v-model="country_selects"
  item-text="name"
  item-value="value"
  multiple
  chips
  hint="What are the target regions"
  persistent-hint
  autocomplete
></v-select>

然后是script部分中的数据

data: function () {
return {
  name: '',
  email: '',
  select: null,
  items: [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4'
  ],
  country_selects: [],
  countries: [
    {header: "Europe"},
    {name: "Afghanistan", value: "AF"},
    {name: "Second", value: "DF"},
    {header: "Second"},
    {name: "Charlotte", value: "AF"},
    {name: "North Carolina", value: "DF"},       
    ],

到目前为止，我找到了header键，但我需要将其变成一个复选框。有什么想法吗？