问题

<template>
  <q-btn-toggle v-model="encryptionType" spread class="q-mt-lg" no-caps unelevated :toggle-color="toggleColor" :toggle-text-color="toggleTextColor" :color="color" :text-color="textColor" @update:model-value="checkButtonToggle" :options="options">
    <div v-if="options.length > 1">
      <div v-for="type in options" :key="type.value">
        <template #[type.value]> <!-- 似乎这部分工作不正常 -->
          <q-icon v-if="props[type.value] && encryptionType === type.value" name="check_circle" color="white" class="q-ml-sm" />
        </template>
      </div>
    </div>
  </q-btn-toggle>
</template>

options: [
  { label: 'rsa', value: 'rsa', attrs: { class: 'text-weight-bold font-size-18' }, slot: 'rsa' },
  { label: 'des', value: 'des', attrs: { class: 'text-weight-bold font-size-18' }, slot: 'des' },
  { label: 'aes', value: 'aes', attrs: { class: 'text-weight-bold font-size-18' }, slot: 'aes' }
]

<div v-for="type of options" :key="type.value">
  <template :v-slot="type.value">
    <q-icon v-if="props[type.value] && encryptionType === type.value" name="check_circle" color="white" class="q-ml-sm" />
  </template>
</div>

想要更简洁的方式来实现，因为现在这种方式实在是太重复了：

<template #des>
  <q-icon  v-if="props.des && encryptionType === 'des'" name="check_circle" color="white" class="q-ml-sm" />
</template>

<template #aes>
  <q-icon  v-if="props.aes && encryptionType === 'aes'" name="check_circle" color="white" class="q-ml-sm" />
</template>

<template #rsa>
  <q-icon v-if="props.rsa && encryptionType === 'rsa'" name="check_circle" color="white" class="q-ml-sm" />
</template>

<details>
<summary>英文:</summary>

I am trying to simplify some codes and wanted to loop through an array, from which the scope names will be taken from:

<template>
<q-btn-toggle v-model="encryptionType" spread class="q-mt-lg" no-caps unelevated :toggle-color="toggleColor" :toggle-text-color="toggleTextColor" :color="color" :text-color="textColor" @update:model-value="checkButtonToggle" :options="options">
<div v-if="options.length > 1">
<div v-for="type in options" :key="type.value">
<template #[type.value]> <!-- seems like this part isnt working correctly -->
<q-icon v-if="props[type.value] && encryptionType === type.value" name="check_circle" color="white" class="q-ml-sm" />
</template>
</div>
</div>
</q-btn-toggle>
</template>

Then the options is like this:

```js
options: [
  { label: 'rsa', value: 'rsa', attrs: { class: 'text-weight-bold font-size-18' }, slot: 'rsa' }
  { label: 'des', value: 'des', attrs: { class: 'text-weight-bold font-size-18' }, slot: 'des' }
  { label: 'aes', value: 'aes', attrs: { class: 'text-weight-bold font-size-18' }, slot: 'aes' }
]

However I am getting this error message:

Codegen node is missing for element/if/for node. Apply appropriate transforms first.

If I change how I use scoped slots to this, then there's no error, but <q-icon> isnt rendered as well.

      <div v-for="type of options" :key="type.value">
        <template :v-slot="type.value">
          <q-icon v-if="props[type.value] && encryptionType === type.value" name="check_circle" color="white" class="q-ml-sm" />
        </template>
      </div>

Want a cleaner way to do it since doing this is just plain too repetitive:

<template #des>
  <q-icon  v-if="props.des && encryptionType === 'des'" name="check_circle" color="white" class="q-ml-sm" />
</template>

<template #aes>
  <q-icon  v-if="props.aes && encryptionType === 'aes'" name="check_circle" color="white" class="q-ml-sm" />
</template>

<template #rsa>
  <q-icon v-if="props.rsa && encryptionType === 'rsa'" name="check_circle" color="white" class="q-ml-sm" />
</template>

Help!

答案1

得分: 2

You use the slots wrong. The problem is easily recreated.
你的插槽使用方式不正确。问题很容易重现。

You insert this into the default slot of q-btn-toggle:
你将这个插入到q-btn-toggle的默认插槽中：

<div v-if="options.length > 1">

And then inside the default slot you try to insert into name slots which don't exist. Thus node is missing.
然后在默认插槽中，你尝试插入到不存在的名称插槽中。因此出现了node is missing.

To fix you just change your DIVs to <template>. Unfortunately 2 <template>s with v-if and v-for didn't work for me, but it's easily fixed with a ternary expression:
要修复它，只需将你的DIV更改为<template>。不幸的是，带有v-if和v-for的两个<template>对我不起作用，但可以使用三元表达式轻松解决：

The SFC playground is here

<q-btn-toggle v-model="encryptionType" spread class="q-mt-lg" no-caps unelevated :toggle-color="toggleColor" :toggle-text-color="toggleTextColor" :color="color" :text-color="textColor" @update:model-value="checkButtonToggle" :options="options">
    <template v-for="type in options.length > 1 ? options : []" :key="type.value" #[type.value]>
        <q-icon v-if="props[type.value] && encryptionType === type.value" name="check_circle" color="white" class="q-ml-sm" />
    </template>
</q-btn-toggle>

Recreation:
重现：

<div v-if="options.length > 1">

  <q-btn-toggle v-model="encryptionType" spread class="q-mt-lg" no-caps unelevated :toggle-color="toggleColor" :toggle-text-color="toggleTextColor" :color="color" :text-color="textColor" @update:model-value="checkButtonToggle" :options="options">
      <template v-for="type in options.length > 1 ? options : []" :key="type.value" #[type.value]>
          <q-icon v-if="props[type.value] && encryptionType === type.value" name="check_circle" color="white" class="q-ml-sm" />
      </template>
  </q-btn-toggle>

答案2

得分: -1

Thanks to @alexander-nenashev, I got an idea on how to fix it. Simplified, it looks like this:

  <q-btn-toggle v-model="encryptionType" spread class="q-mt-lg" no-caps unelevated :toggle-color="toggleColor"
    :toggle-text-color="toggleTextColor" :color="color" :text-color="textColor" @update:model-value="checkButtonToggle"
    :options="options">
    <template v-for="type in options" #[type.value]>
      <q-icon v-if="props[type.value] && encryptionType === type.value" name="check_circle" color="white"
        class="q-ml-sm" />
    </template>
  </q-btn-toggle>

  <q-btn-toggle v-model="encryptionType" spread class="q-mt-lg" no-caps unelevated :toggle-color="toggleColor"
    :toggle-text-color="toggleTextColor" :color="color" :text-color="textColor" @update:model-value="checkButtonToggle"
    :options="options">
    <template v-for="type in options" #[type.value]>
      <q-icon v-if="props[type.value] && encryptionType === type.value" name="check_circle" color="white"
        class="q-ml-sm" />
    </template>
  </q-btn-toggle>