vue-native-core icon indicating copy to clipboard operation
vue-native-core copied to clipboard

Use data provider pattern

Open s3bul opened this issue 6 years ago • 1 comments

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:

  • https://vuedose.tips/tips/data-provider-component-in-vue-js/
  • https://codesandbox.io/s/3rmol5rpqm

s3bul avatar Oct 17 '19 19:10 s3bul

@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 avatar Dec 01 '19 08:12 RishabhKarnad