Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use data provider pattern #215

Open
s3bul opened this issue Oct 17, 2019 · 1 comment
Open

Use data provider pattern #215

s3bul opened this issue Oct 17, 2019 · 1 comment
Labels
enhancement New feature or request

Comments

@s3bul
Copy link

s3bul commented Oct 17, 2019

Description of the bug
I want to use data provider pattern, but i got warnings like
Warning: Each child in a list should have a unique "key" prop.%s%s See https://fb.me/react-warning-keys for more information.%s when two components is inside default slot in provider component. Adding key property doesn't fix this. For this I don't use render method in data provider component and it looks like this

<template>
    <view>
        <slot :data="data" :loading="loading" />
    </view>
</template>
<provider :url="providerUrl">
    <template scope="{ data, loading }">
        <nb-text v-if="!loading">{{ data.name }}</nb-text>
        <nb-text v-if="!loading">{{ data.desc }}</nb-text>
    </template>
</provider>

When I use render method in data provider component, i got

  • Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, object
  • Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

This working without warnings

<provider :url="providerUrl">
    <template scope="{ data, loading }">
        <nb-text v-if="!loading" :key="data.id">{{ data.name }}</nb-text>
    </template>
</provider>

Did I use vue-native-cli to create the project?
Yes

Am I using Expo?
Yes

Additional context
What is data provider:

@s3bul s3bul changed the title Question: Use data provider pattern Use data provider pattern Oct 17, 2019
@RishabhKarnad
Copy link
Contributor

@s3bul apologies that this reply took so long.

Since the provider pattern uses custom render methods, this approach won't work with Vue Native at the moment.

I'll leave this issue open to keep this in mind for future work on the framework.

@RishabhKarnad RishabhKarnad added the enhancement New feature or request label Dec 2, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants