fix: emoji caused v-if button

This commit is contained in:
YunYouJun
2022-04-17 14:41:07 +08:00
parent 4ac704d6fe
commit d56926f538

View File

@@ -102,7 +102,7 @@ const { isVisible, show } = useInvisibleElement(recipePanel)
<template> <template>
<Transition> <Transition>
<button <button
v-if="displayedRecipe.length !== recipe.length && isVisible" v-show="displayedRecipe.length !== recipe.length && isVisible"
ref="recipeBtn" ref="recipeBtn"
class="cursor-pointer fixed inline-flex justify-center items-center rounded rounded-full shadow hover:shadow-md" class="cursor-pointer fixed inline-flex justify-center items-center rounded rounded-full shadow hover:shadow-md"
bg="green-50" w="10" h="10" bottom="4" right="4" bg="green-50" w="10" h="10" bottom="4" right="4"
@@ -128,7 +128,7 @@ const { isVisible, show } = useInvisibleElement(recipePanel)
<VegetableTag <VegetableTag
v-for="item, i in vegetable" :key="i" v-for="item, i in vegetable" :key="i"
:active="curStuff.includes(item.name)" :active="curStuff.includes(item.name)"
@click="() => toggleStuff(item, 'vegetable')" @click="toggleStuff(item, 'vegetable')"
> >
<span v-if="item.emoji" class="inline-flex">{{ item.emoji }}</span> <span v-if="item.emoji" class="inline-flex">{{ item.emoji }}</span>
<span v-else-if="item.image" class="inline-flex"> <span v-else-if="item.image" class="inline-flex">