英文:
vue 3 js vuetify component v-data-table not resolving table data object
问题
I'm new to vue and trying vuetify components for UI. I facing problem with v-data-table component of vuetify in localhost. Using vue 3 with vuetify 3 component v-data-table but no table was rendered in the browser throws no console error or eslint, Browser devtool inspecting v-data-table element
以下是项目的 package.json 部分内容:
package.json
{
"name": "multi_filter_data_table",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@mdi/font": "5.9.55",
"core-js": "^3.8.3",
"roboto-fontface": "*",
"vue": "^3.3.4",
"vuetify": "^3.3.10",
"webfontloader": "^1.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.5.8",
"vue-template-compiler": "^2.6.14",
"webpack-plugin-vuetify": "^2.0.0-alpha.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
main.js 部分内容:
import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
loadFonts()
createApp(App)
.use(vuetify)
.mount('#app')
App.vue 部分内容:
<template>
<v-app>
<v-main>
<DataTable/>
</v-main>
</v-app>
</template>
<script>
import DataTable from './components/DataTable.vue'
export default {
name: 'App',
components: {
DataTable,
},
data: () => ({
//
}),
}
</script>
vuetify.js 部分内容:
// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
// Vuetify
import { createVuetify } from 'vuetify'
export default createVuetify(
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
)
datatable.vue 部分内容:
<template>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
></v-data-table>
</template>
<script>
export default {
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{
text: 'Iron (%)',
value: 'iron',
sort: (a, b) => {
a = a.replace(/[^0-9]/g, '');
b = b.replace(/[^0-9]/g, '');
return a-b;
}
},
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
// Add more dessert data here...
],
}
},
}
</script>
希望以上翻译能帮助你解决在浏览器中正常显示数据表格的问题。
英文:
I'm new to vue and trying vuetify components for UI. I facing problem with v-data-table component of vuetify in localhost. Using vue 3 with vuetify 3 component v-data-table but no table was rendered in the browser throws no console error or eslint, Browser devtool inspecting v-data-table element
Below is the npm serve of project runs successfullynode terminal npm serve
other components like v-navigation-drawer, v-app-bar are working fine.
Using vue cli for scaffolding the app vue 3 and vuetify 3.3.10
below added project package.json main.js App.vue vuetify.js and datatable.vue component where table data are added
package.json
{
"name": "multi_filter_data_table",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@mdi/font": "5.9.55",
"core-js": "^3.8.3",
"roboto-fontface": "*",
"vue": "^3.3.4",
"vuetify": "^3.3.10",
"webfontloader": "^1.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.5.8",
"vue-template-compiler": "^2.6.14",
"webpack-plugin-vuetify": "^2.0.0-alpha.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
main.js
import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
loadFonts()
createApp(App)
.use(vuetify)
.mount('#app')
App.vue
<template>
<v-app>
<v-main>
<DataTable/>
</v-main>
</v-app>
</template>
<script>
import DataTable from './components/DataTable.vue'
export default {
name: 'App',
components: {
DataTable,
},
data: () => ({
//
}),
}
</script>
vuetify.js
// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
// Vuetify
import { createVuetify } from 'vuetify'
export default createVuetify(
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
)
datatable.vue
<template>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
></v-data-table>
</template>
<script>
export default {
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{
text: 'Iron (%)',
value: 'iron',
sort: (a, b) => {
a = a.replace(/[^0-9]/g, '');
b = b.replace(/[^0-9]/g, '');
return a-b;
}
},
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
],
}
},
}
</script>```
I have found to use v-data-table This feature requires v3.1.0 (Valkyrie) and vue 3 I have used this version
How can i implement the table for proper display of data in browser
</details>
# 答案1
**得分**: 1
你需要在你的 Vuetify 配置中明确添加实验组件(例如 v-data-table)。
示例:
```javascript
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as labsComponents from 'vuetify/labs/components'
export default createVuetify({
components: {
...components,
...labsComponents,
},
})
英文:
You need to specifically add Lab components (ex v-data-table) in your vuetify config.
https://vuetifyjs.com/en/labs/introduction/
Ex.
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as labsComponents from 'vuetify/labs/components'
export default createVuetify({
components: {
...components,
...labsComponents,
},
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论