我试图简化一些代码，并希望通过一个数组进行循环，从中获取范围名称：
<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>然后选项是这样的：
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' }
]但是我收到了这个错误消息：
Codegen node is missing for element/if/for node. Apply appropriate transforms first.如果我将使用作用域插槽的方式改为这样，那么就不会有错误，但也不会呈现。
<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>救命啊
2条答案
按热度按时间4c8rllxm1#
你用错了插槽。问题很容易重现。将其插入
q-btn-toggle的默认插槽：然后在默认插槽中尝试插入不存在的名称插槽。因此
node is missing.要解决这个问题，只需将DIV更改为
<template>。不幸的是，2个<template>和v-if和v-for对我不起作用，但它很容易用一个ternar表达式修复：证监会Playground在这里
娱乐：
gxwragnw2#
感谢@alexander-nenashev，我有了一个解决问题的想法。简化后，它看起来像这样：