How to resolve duplicate slot presence in this case? [Vue]

Question

Currently I am getting this error:

Duplicate presence of slot "default" found in the same render tree - this will likely cause render errors.

Although there are some examples on how to fix this I don't know exactly how to resolve this in my case.

This is the markup I am using in my PHP file for my search component.

<search>
    <form action="#" class="form-inline">
        <div class="form-group">
            <label for="number_persons">Persons</label>

            <select class="form-control" name="num_persons">
                <etc>
            </select>
        </div><!-- /.form-group -->
    </form>
</search>

My .vue search component has a template that looks like this:

<template>
    <div class="item" v-for="item in items">
        <div class="alert alert-warning" v-show="prices">
            <slot></slot>
        </div>

        <pagination></pagination>
    </div><!-- /.items -->
</template>

From the documentation I see you are to use something like scoped slots? I have tried implementing them but I can't get it to work. I have simply tried adding scope to the form in the PHP file and the vue component.

Can anybody possibly tell me what syntax to use in this case?

Updated example from @Cobaltway

https://jsfiddle.net/31x0cy2p/1/

@Cobaltway sorry I was not being clear with my example. I have added a loop since that is where it is going wrong. On repeat of the default slot. — Stephan-v
Is it your goal to have the slot reproduced n times identically? — FitzFish

FitzFish FitzFish · Accepted Answer · 2017-06-15T09:03:58

For scoped slot, a <template> element in the parent, with a property scope, seems to be mandatory, as specified in the third example here. It must be a template element, it does not work with anything else.

In the parent, a <template> element with a special attribute scope indicates that it is a template for a scoped slot. The value of scope is the name of a temporary variable that holds the props object passed from the child.

Vue.component('search', {
  template: `
    <div>
      <div v-for="n in 10">
        <slot :text="n"></slot>
      </div>
    </div>`
});

new Vue({el:'#app'});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
  <search>
    <template scope="props">
        <form action="#">
            <div>
                <label for="number_persons">Person {{ props.text }}</label>
                <select name="num_persons"></select>
            </div>
        </form>
    </template>
  </search>
</div>

How to resolve duplicate slot presence in this case? [Vue]

1 Answers