Vue: Vue Fragments ( React Fragments )

[ralphchristianeclipse]

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

[jkzing]

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.😃

[ralphchristianeclipse]

@jzking it emits errors

Cannot use as component root element because it may contain multiple nodes.

[posva]

Duplicate of #7088

[deot]

• 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>