Vue Fragments ( React Fragments )
ralphchristianeclipse opened this issue Β· 4 comments
What problem does this feature solve?
This solve the issue where multiple root components is not allowed like for instance
i'm trying to do this with slots using my own component for page loading and checking if its on loading and not loading state and checking if its valid to render the main component
<template lang="pug">
v-progress-linear.ma-0(v-if="loading" color="secondary")
div(v-else-if="loaded")
slot
v-container(fluid fill-height v-else)
v-layout(justify-center align-center)
slot(name="no-result")
h1.text-xs-center No Result
</template>
<script>
export default {
name: "Page",
props: {
loading: {
type: Number,
default: 0
},
valid: {
type: Boolean
}
},
computed: {
loaded() {
return this.valid && !this.loading;
}
}
};
</script>
So in this part of the template makes another div to just prevent the multiple root issue
div(v-else-if="loaded")
slot
so doing it like this would help
slot(fragment) Fall back content
I know this thing can be done somehow on render functions
but its not vueish anymore :)
What does the proposed API look like?
so in slots
we can do
<slot fragment></slot>
and in template syntax
<template fragment> </template>
Got the idea here https://reactjs.org/docs/fragments.html
Actually you can add v-else-if
directly on slot
like:
slot(v-else-if="loaded")
Besides, template
is already working like React Fragment I think.π
@jzking it emits errors
Cannot use as component root element because it may contain multiple nodes.
- fragment
export default {
functional: true,
render(h, ctx) {
return ctx.children;
}
};
- table
<template>
<table>
<thead>
<th v-for="item in columns" :key="item">
{{ item }}
</th>
</thead>
<tbody>
<template v-for="item in data">
<slot v-bind="item" />
</template>
</tbody>
</table>
</template>
<script>
// ...
</script>
use it like this:
<template>
<vc-table>
<!-- use it by slot-->
<vc-fragment slot-scope="it" :key="it.id">
<tr @click="handleClick($event, it.id)">ηΉζ</tr>
<tr>2</tr>
<tr>3</tr>
<tr>4</tr>
<tr>5</tr>
</vc-fragment>
</vc-table>
</template>
<script>
import Table from './Table';
import Fragment from './fragment';
export default {
name: 'vc-fragment-basic',
components: {
'vc-table': Table,
'vc-fragment': Fragment
},
methods: {
handleClick(e, id) {
alert('δ½ ηΉε»δΊζ');
}
}
};
</script>
u can't do that like this:
<template>
<vc-fragment>
<tr>1</tr>
<tr>2</tr>
<tr>3</tr>
<tr>4</tr>
<tr>5</tr>
</vc-fragment>
</template>