Very strange problem with vuetify datatable / props is not defined

Question

I am using version 1.5.6 of Vuetify (upset on a Laravel 5.8 backend and VueJs 2.5.17) and put one of the DatatableComponent examples (https://vuetifyjs.com/en/components/data-tables) from the documentation into my app adopting it to my requirements. However, I did not change a lot of things but when it runs in my app, I get the following error every time the datatable is rendered:

Property or method "props" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. in TransactionComponent

When I try exactly the same code on Codepen it works without any problems: https://codepen.io/anon/pen/Rdjjgx

On my local app I have the following structure (the only difference to the example above is, that the component itself is loaded via VueJs router not via template):

TransactionComponent.vue:

<template>
  <v-card>
    <v-card-title>
      Transaktionen
      <v-spacer></v-spacer>
      <v-text-field
        v-model="search"
        append-icon="search"
        label="Suche..."
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table
      :headers="headers"
      :items="transactions"
      :search="search">
      <template v-slot:items="props">
        <td>{{ props.item.date }}</td>
        <td class="text-xs-right">{{ props.item.type }}</td>
        <td class="text-xs-right">{{ props.item.remark }}</td>
        <td class="text-xs-right">{{ props.item.plane }}</td>
        <td class="text-xs-right" v-bind:class="{'color':(props.item.fee > 0 ? '#0F0' : '#F00')}">{{ props.item.fee }}</td>
      </template>
      <v-alert v-slot:no-results :value="true" color="error" icon="warning">
        Ihre Suche für "{{ search }}" brachte keine Ergebnisse.
      </v-alert>
    </v-data-table>
  </v-card>
</template>

<script>
    export default {
        data() {
            return {        
                search: '',
                headers: [
                {
                    text: 'Datum',
                    align: 'left',
                    sortable: false,
                    value: 'date'
                },
                { text: 'Flugart', value: 'type' },
                { text: 'Beschreibung', value: 'remark' },
                { text: 'Type', value: 'plane' },
                { text: 'Betrag', value: 'fee' }
                ],
                transactions: [{date:"",type:"",remark:"",plane:"",fee:""}],
                loading: false
            };
        },
        methods: {
        },
        mounted() {
        }
    }
</script>

app.js (relevant parts):

require('./bootstrap');

window.Vue = require('vue');

Vue.component('dashboard-component', require('./components/DashboardComponent.vue').default);

import Vuetify from 'vuetify'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
Vue.use(Vuetify)

import 'vuetify/dist/vuetify.min.css'

import DutyComponent from './components/DutyComponent.vue';
import TransactionComponent from './components/TransactionComponent.vue';
import AdminComponent from './components/AdminComponent.vue';

const moment = require('moment')
require('moment/locale/de')
 
Vue.use(require('vue-moment'), {
    moment
})

let router = new VueRouter({
    routes: [
      {
        path: '/duties',
        name: 'Dienste',
        component: DutyComponent,
      },
      {
        path: '/transactions',
        name: 'Pilotenkonto',
        component: TransactionComponent,
      },
      {
        path: '/admin',
        name: 'Admin',
        component: AdminComponent,
      }
    ]
  })

const app = new Vue({
    el: '#app',    
    router,
    data() {
      return {
          logged_in: true
      };
    }
});

app.blade.html (relevant parts):

<div id="app">
    <v-app id="inspire" dark>
        <dashboard-component ref="dashboard" v-if="logged_in"></dashboard-component>
    </v-app>
</div>

DashboardComponent.vue (relevant parts - here also the router view is located):

<main>
    <v-content>
        <v-container>
            <v-fade-transition mode="out-in">
                <router-view></router-view>
            </v-fade-transition>
        </v-container>
    </v-content>
</main>

I have tried everything without any luck, respecting the documentation. I can't see any problem. I can only guess that the problem may be dedicated to the difference of embedding the component into the app with the VueRouter instead.

Please help ! Thank you !

Answer 1

You are running Vue 2.5.17 and the v-slot directive was introduced in Vue 2.6.0 as you can read in the official documentation. Try updating your dependencies and see if it works.