vue 3 js vuetify 组件 v-data-table 未解析表格数据对象

huangapple go评论58阅读模式
英文:

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
{
  &quot;name&quot;: &quot;multi_filter_data_table&quot;,
  &quot;version&quot;: &quot;0.1.0&quot;,
  &quot;private&quot;: true,
  &quot;scripts&quot;: {
    &quot;serve&quot;: &quot;vue-cli-service serve&quot;,
    &quot;build&quot;: &quot;vue-cli-service build&quot;,
    &quot;lint&quot;: &quot;vue-cli-service lint&quot;
  },
  &quot;dependencies&quot;: {
    &quot;@mdi/font&quot;: &quot;5.9.55&quot;,
    &quot;core-js&quot;: &quot;^3.8.3&quot;,
    &quot;roboto-fontface&quot;: &quot;*&quot;,
    &quot;vue&quot;: &quot;^3.3.4&quot;,
    &quot;vuetify&quot;: &quot;^3.3.10&quot;,
    &quot;webfontloader&quot;: &quot;^1.0.0&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@babel/core&quot;: &quot;^7.12.16&quot;,
    &quot;@babel/eslint-parser&quot;: &quot;^7.12.16&quot;,
    &quot;@vue/cli-plugin-babel&quot;: &quot;~5.0.0&quot;,
    &quot;@vue/cli-plugin-eslint&quot;: &quot;~5.0.0&quot;,
    &quot;@vue/cli-service&quot;: &quot;~5.0.0&quot;,
    &quot;eslint&quot;: &quot;^7.32.0&quot;,
    &quot;eslint-plugin-vue&quot;: &quot;^8.0.3&quot;,
    &quot;sass&quot;: &quot;~1.32.0&quot;,
    &quot;sass-loader&quot;: &quot;^10.0.0&quot;,
    &quot;vue-cli-plugin-vuetify&quot;: &quot;~2.5.8&quot;,
    &quot;vue-template-compiler&quot;: &quot;^2.6.14&quot;,
    &quot;webpack-plugin-vuetify&quot;: &quot;^2.0.0-alpha.0&quot;
  },
  &quot;eslintConfig&quot;: {
    &quot;root&quot;: true,
    &quot;env&quot;: {
      &quot;node&quot;: true
    },
    &quot;extends&quot;: [
      &quot;plugin:vue/essential&quot;,
      &quot;eslint:recommended&quot;
    ],
    &quot;parserOptions&quot;: {
      &quot;parser&quot;: &quot;@babel/eslint-parser&quot;
    },
    &quot;rules&quot;: {}
  },
  &quot;browserslist&quot;: [
    &quot;&gt; 1%&quot;,
    &quot;last 2 versions&quot;,
    &quot;not dead&quot;
  ]
}

main.js

import { createApp } from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import vuetify from &#39;./plugins/vuetify&#39;
import { loadFonts } from &#39;./plugins/webfontloader&#39;

loadFonts()

createApp(App)
  .use(vuetify)
  .mount(&#39;#app&#39;)

App.vue

&lt;template&gt;
  &lt;v-app&gt;
    &lt;v-main&gt;
      &lt;DataTable/&gt;
    &lt;/v-main&gt;
  &lt;/v-app&gt;
&lt;/template&gt;

&lt;script&gt;
import DataTable from &#39;./components/DataTable.vue&#39;

export default {
  name: &#39;App&#39;,

  components: {
    DataTable,
  },

  data: () =&gt; ({
    //
  }),
}
&lt;/script&gt;

vuetify.js

// Styles
import &#39;@mdi/font/css/materialdesignicons.css&#39;
import &#39;vuetify/styles&#39;

// Vuetify
import { createVuetify } from &#39;vuetify&#39;

export default createVuetify(
  // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
)

datatable.vue

&lt;template&gt;
  &lt;v-data-table
    :headers=&quot;headers&quot;
    :items=&quot;desserts&quot;
    :items-per-page=&quot;5&quot;
    class=&quot;elevation-1&quot;
  &gt;&lt;/v-data-table&gt;
&lt;/template&gt;

&lt;script&gt;
  export default {
    data () {
      return {
        headers: [
          {
            text: &#39;Dessert (100g serving)&#39;,
            align: &#39;start&#39;,
            sortable: false,
            value: &#39;name&#39;,
          },
          { text: &#39;Calories&#39;, value: &#39;calories&#39; },
          { text: &#39;Fat (g)&#39;, value: &#39;fat&#39; },
          { text: &#39;Carbs (g)&#39;, value: &#39;carbs&#39; },
          { text: &#39;Protein (g)&#39;, value: &#39;protein&#39; },
          { 
            text: &#39;Iron (%)&#39;,
            value: &#39;iron&#39;,
            sort: (a, b) =&gt; {
              a = a.replace(/[^0-9]/g, &#39;&#39;);
              b = b.replace(/[^0-9]/g, &#39;&#39;);
              return a-b;
            }
          },
        ],
        desserts: [
          {
            name: &#39;Frozen Yogurt&#39;,
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: &#39;1%&#39;,
          },
          {
            name: &#39;Ice cream sandwich&#39;,
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: &#39;1%&#39;,
          },
          {
            name: &#39;Eclair&#39;,
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: &#39;7%&#39;,
          },
          {
            name: &#39;Cupcake&#39;,
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: &#39;8%&#39;,
          },
          {
            name: &#39;Gingerbread&#39;,
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: &#39;16%&#39;,
          },
          {
            name: &#39;Jelly bean&#39;,
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            iron: &#39;0%&#39;,
          },
          {
            name: &#39;Lollipop&#39;,
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: &#39;2%&#39;,
          },
          {
            name: &#39;Honeycomb&#39;,
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            iron: &#39;45%&#39;,
          },
          {
            name: &#39;Donut&#39;,
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            iron: &#39;22%&#39;,
          },
          {
            name: &#39;KitKat&#39;,
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            iron: &#39;6%&#39;,
          },
        ],
      }
    },
  }
&lt;/script&gt;```

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 &#39;vuetify&#39;
import * as components from &#39;vuetify/components&#39;
import * as labsComponents from &#39;vuetify/labs/components&#39;

export default createVuetify({
  components: {
    ...components,
    ...labsComponents,
  },
})

huangapple
  • 本文由 发表于 2023年7月31日 22:31:52
  • 转载请务必保留本文链接:https://go.coder-hub.com/76804617.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定