Vue: Ambiguous combined usage of slot-scope and v-for

[razbakov]

Version

2.5.13

Reproduction link

https://codepen.io/anon/pen/NyeVEO

Steps to reproduce

See codepen link or use the following code:

<div id="app">
  <my-list :items="items">
    <li v-for="num in red" :key="num" slot-scope="props" :slot="'slot-'   num" style="color:red">{{ props.item.text }}</li>
  </my-list>

</div>

<template id="my-list-template">
  <ul>
     <template v-for="item in items">
       <slot :name="'slot-'   item.id" :item="item">
         <li>{{ item.text }}</li>
       </slot>
     </template>
    </slot>
  </ul>
</template>

console.clear()

Vue.component("my-list",{
  props:["items"],
  template: "#my-list-template",
})

new Vue({
  el:"#app",
  data:{
    items:[
      {id: "x", text: "item 1", message: "message 1"},
      {id: "y", text: "item 2", message: "message 2"},
      {id: "z", text: "item 3", message: "message 3"}
    ],
    red:["y", "z"]
  }
})

What is expected?

• no warning
• or any way to solve the warning and have a working solution

What is actually happening?

Console warning:

Ambiguous combined usage of slot-scope and v-for on <li> (v-for takes higher priority). Use a wrapper <template> for the scoped slot to make it clearer.

This template solves the warning, but breaks the functionality:

<div id="app">
  <my-list :items="items">
    <template v-for="num in red" >
      <li :key="num" slot-scope="props" :slot="'slot-' + num"  style="color:red">{{ props.item.text }}</li>
    </template>
  </my-list>
</div>

neither works this:

<div id="app">
  <my-list :items="items">
    <template v-for="num in red">
      <template slot-scope="props" :slot="'slot-' + num">
        <li style="color:red">{{ props.item.text }}</li>
      </template>
    </template>
  </my-list>
</div>

[posva]

The warning is telling you to use the slot-scope on the template 😄

  <my-list :items="items">
    <template v-for="num in red" slot-scope="props" :slot="'slot-' + num" >
      <li  :key="num"  style="color:red">{{ props.item.text }}</li>
    </template>
  </my-list>