无法使用 Vuetify 和 Laravel 读取未定义的属性“t”
Posted
技术标签:
【中文标题】无法使用 Vuetify 和 Laravel 读取未定义的属性“t”【英文标题】：Cannot read property 't' of undefined using Vuetify and Laravel 【发布时间】：2020-01-24 00:15:06 【问题描述】：尝试使用开箱即用的 Vuetify 组件时出现此错误。也许只是我对如何在 Laravel 中实现 Vuetify 组件缺乏了解。
Laravel v5.8.35、Vue v2.6.10、Vuetify v2.0.18。
错误：
[Vue 警告]：渲染错误：“TypeError：无法读取属性 't' 未定义”
发现于
--->
在 resources/js/components/Test.vue
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
import Vuetify from 'vuetify';
Vue.use(Vuetify);
Vue.component('test', require('./components/Test.vue').default);
const app = new Vue(
el: '#app',
);
布局/vue.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Vue Examples</title>
<meta name="csrf-token" content=" csrf_token() ">
</head>
<body>
<div id="app">
@yield("content")
</div>
<script src=" asset('/js/app.js') "></script>
</body>
</html>
test.blade.php
@extends('layouts.vue')
@section('content')
<test></test>
@endsection
组件/Test.vue
<template>
<v-container fluid>
<v-row align="center">
<v-col class="d-flex" cols="12" sm="6">
<v-select
:items="items"
label="Standard"
></v-select>
</v-col>
<v-col class="d-flex" cols="12" sm="6">
<v-select
:items="items"
filled
label="Filled style"
></v-select>
</v-col>
<v-col class="d-flex" cols="12" sm="6">
<v-select
:items="items"
label="Outlined style"
outlined
></v-select>
</v-col>
<v-col class="d-flex" cols="12" sm="6">
<v-select
:items="items"
label="Solo field"
solo
></v-select>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default
data: () => (
items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
),
</script>
如您所见，vue 文件正是来自 Vuetify 的 v-select 组件的源代码。不包含此功能的组件：
export default
data: () => (
所有其他组件（例如 ExampleComponent）工作正常。
【问题讨论】：
您没有创建 Vuetify 实例。new Vue( el: '#app', vuetify: new Vuetify() )。 vuetifyjs.com/en/getting-started/…
我是个新手！随意将您的评论作为答案。有点困惑，因为 Laravel 带有 Vue，而 Vuetify 是一个简单的 npm 安装。
【参考方案1】：
您需要创建一个 Vuetify 实例。例如：
new Vue(
el: '#app',
vuetify: new Vuetify()
)
这已记录在 here，尽管他们确实将其隐藏在页面下方很长的位置。
【讨论】：
谢谢！我有同样的问题，你的解决方案也对我有用，我在 Laravel 6 上（提到 SEO 目的）！干杯！以上是关于无法使用 Vuetify 和 Laravel 读取未定义的属性“t”的主要内容，如果未能解决你的问题，请参考以下文章
Vuetify（Vue + Laravel）路由器推送后未设置导航栏活动链接
如何在 Laravel 的其他 Vue/Vuetify 组件中嵌入 Vue/Vuetify 组件？
将 Vuetify 添加到我的 laravel/Vue 应用程序会破坏一些 laravel 组件 css