vue-native-core
vue-native-core copied to clipboard
Use data provider pattern
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, objectInvariant 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 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.