Asked Jan 5th, 2:04 p.m. 89 0 2
  • 89 0 2
+2

Type checking condition(v-if) in template - Vue Typescript

Share
  • 89 0 2

Xin chào mọi người !!!

Mình vừa thấy 1 thắc mắc là mình có 2 prop iconName như bên dưới và mình có 1 component Button

interface TabProps {
  icon?: IconName;
  iconPosition?: 'left' | 'right';
}
const props = withDefaults(defineProps<TabProps>(), {
  icon: undefined,
  iconPosition: 'left',
});

Viết như này sẽ lỗi

 <Button :variant="tabVariant" :color="tabColor" :class="tabClasses" @click="handleChangeTab">
    <template v-if="icon" #leftIcon>
      <Icon :name="icon" width="18" height="18" />
    </template>
    <slot />
  </Button>

Mình thắc mắc ở chỗ là:

Nếu dùng v-if như này <template v-if="icon" #leftIcon>

=> Error: Type 'IconName | undefined' is not assignable to type 'IconName'.

Còn nếu mà mình dùng v-if như này v-if="icon" => Thì không có lỗi, nhưng thế này nó sẽ render 1 empty tag

2 ANSWERS


Answered Jan 6th, 6:37 a.m.
0

Mình nghĩ lỗi do :name không nhận giá trị undefined đó bạn.

Share
Jan 6th, 12:20 p.m.

Đúng vậy icon có thể là IconName or undefined

Nhưng rõ ràng khi bạn check if như vậy thì bên trong template thì làm gì có thể xảy ra icon = undefined

Mình đang thắc mắc là <template> không render trên dom mà check như vậy thì không đúng

0
| Reply
Share
Avatar meos meos @manhle
Jan 7th, 4:51 a.m.

Bạn thử xem câu trả lời này xem. link

0
| Reply
Share
Answered Jan 6th, 10:01 a.m.
0

#leftIcon để làm gì vậy bạn
Nếu chưa fix được thì bạn đẩy code lên codesandbox or stackblitz để mình xem qua nhé

Share
Jan 6th, 12:20 p.m.

slot name trong vue á bạn

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.