1

我有一个包含 v-data-table 组件（vuetify）的文件和另一个包含我的数据的文件。我想在 v-data-table 中显示数据并试图找到解决方案。我不想合并这些文件，我想将它保存在两个单独的文件中。

我的代码：

Mytable.vue

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    hide-default-header
    hide-default-footer
    class="elevation-1"
  ></v-data-table>
</template>

甜点.js

 const 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%',
          },
       
       
      ]
4

1 回答 1

1

导出数据desserts.js如下：

const desserts= [    { ...

}];

export default desserts;

并在您的组件中导入它并将其添加到您的数据选项中：

import desserts from './desserts.js'

export default{
  data(){
     return{
          dessersts,
  ....
于 2020-11-03T10:39:41.230 回答