vuetify datatable / props 非常奇怪的问题没有定义

Posted 2023-02-22

【中文标题】vuetify datatable / props 非常奇怪的问题没有定义

【英文标题】：Very strange problem with vuetify datatable / props is not defined

【发布时间】：2019-08-03 12:20:49

【问题描述】：

我正在使用 Vuetify 1.5.6 版（对 Laravel 5.8 后端和 VueJs 2.5.17 感到不满），并将文档中的一个 DatatableComponent 示例 (https://vuetifyjs.com/en/components/data-tables) 放入我的应用程序中，根据我的要求采用它。 但是，我并没有改变很多东西，但是当它在我的应用程序中运行时，每次呈现 datatable 时都会出现以下错误：

属性或方法“props”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。在事务组件中

当我在 Codepen 上尝试完全相同的代码时，它可以正常工作： https://codepen.io/anon/pen/Rdjjgx

在我的本地应用程序中，我具有以下结构（与上面示例的唯一区别是，组件本身是通过 VueJs 路由器而不是通过模板加载的）：

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（相关部分）：

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（相关部分）：

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

DashboardComponent.vue（相关部分 - 这里也是路由器视图所在）：

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

尊重文档，我已经尝试了所有方法，但没有任何运气。 我看不出有什么问题。我只能猜测问题可能出在使用 VueRouter 将组件嵌入到应用程序中的差异上。

请帮忙！谢谢！

【参考方案1】：

您正在运行 Vue 2.5.17，并且在 Vue 2.6.0 中引入了 v-slot 指令，您可以在 official documentation 中阅读。尝试更新您的依赖项，看看它是否有效。

【讨论】：

在安装新版本时没有看到我的 package.json 没有更新。它成功了，完美。但现在我得到了错误：[Vue 警告]：无效的道具：道具“项目”的类型检查失败。预期的数组，即使“事务”属性是一个像上面这样的数组，也得到了对象？

没关系 - 我的 ajax 响应不是有效的数组，已修复。谢谢！

谢谢，是的，就您发布的代码而言，一切都很好，很高兴它已修复！

谢谢！不过，我必须更新所有与 Vue 相关的软件包。仅将 vue 更新到 2.6 是不够的！糟糕的是，Vuetify 快速入门中没有提到这一点。