Migrating "slot" deprecated syntax

Question

I'm running on vue.js 2.6.1 the current code (written by a co-worker who's not around anymore)

He used the 'scope' directive with the following deprecated syntax

<template slot="HEAD[epc]" slot-scope="data">
            <div>
              <p class="column-title">{{data.label}}</p>
              <p class="explanation-text">{{data.field.explanation}}</p>
            </div>
</template>

I want to access the slot-scope "data" prop but I want to migrate the old syntax onto a new one the documentation fails to explain how.

also, I tried changing the scope="head[epc]" to v-slot and the console warns me of mixed syntax.

Any help would be welcome. Thanks.

Answer 1

I can only guess that HEAD[epc] is a literal slot name within your child component, eg

<slot name="HEAD[epc]" :label="label" :field="field"></slot>

In order to use this, you will need to create a data or computed property to represent it and use the dynamic slot name syntax. For example, in your parent component

<template v-slot:[slotname]="data">

data: () => ({
  slotname: 'HEAD[epc]'
})

Vue.component('Test', {
  data: () => ({
    label: 'Label',
    field: {
      explanation: 'Explanation'
    }
  }),
  template: `<div>
  <h1>Test</h1>
  <slot name="HEAD[epc]" :label="label" :field="field"></slot>
  </div>`
})

new Vue({
  el: "#app",
  data: () => ({
    slotname: 'HEAD[epc]'
  })
})

.column-title {
  font-weight: bold;
}

.explanation-text {
  color: blue;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <test>
    <template v-slot:[slotname]="data">
    <div>
      <p class="column-title">{{data.label}}</p>
      <p class="explanation-text">{{data.field.explanation}}</p>
    </div>
  </template>
  </test>
</div>