Computer scienceFrontendVue.jsVue 3 SyntaxVue Components

Slots

What could be the problem?

Report a typo

Consider the following Vue.js code for a User component:

<!-- User component -->
<template>
  <div>
    <h2>{{ user.name }}</h2>
    <slot :user="user"></slot>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const user = ref({ name: 'John Doe', age: 30 });
</script>

And its usage in an App component:

<!-- App component -->
<template>
  <User :user="{ name: 'John Doe', email: '[email protected]' }">
    <template #default="slotProps">
      <p>User's email: {{ slotProps.email }}</p>
    </template>
  </User>
</template>

<script setup>
import User from './User.vue';
</script>

When you run this code, the user's email doesn't render on the screen. What could be the problem?

Select one option from the list

The email property is not defined in the user object.

There is no issue with the code; it should render the email correctly.

The slotProps object doesn't contain an email property.

The user prop is not defined in the User component.

___

Create a free account to access the full topic