mjp*_*r11 6 laravel vue.js vuetify.js
尝试使用开箱即用的 Vuetify 组件时出现此错误。也许只是我缺乏了解如何在 Laravel 中实现 Vuetify 组件。
Laravel v5.8.35、Vue v2.6.10、Vuetify v2.0.18。
错误：
[Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性‘t’”
在发现
---> <VSelect> <Test> 在resources/js/components/Test.vue <Root>
应用程序.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>
测试刀片.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 文件正是 v-select 组件的 Vuetify 来源。不包含此工作的组件：
export default {
data: () => ({
所有其他组件（例如 ExampleComponent）都可以正常工作。
ski*_*tle 21
您需要创建一个 Vuetify 实例。例如：
new Vue({
el: '#app',
vuetify: new Vuetify()
})
这是记录在此处，尽管他们确实将其隐藏在页面下方很长的地方。
| 归档时间： |
|
| 查看次数： |
8102 次 |
| 最近记录： |