渲染中的vue.js错误：“0”；TypeError:无法读取属性'；宽度'；“未定义”的定义；武装分子

我正在尝试使用vuetify（首次用户），我想使用vuetify添加一个数据表。但是，当我从文档中添加一个示例时，我两次出现以下两个错误：

[Vue warn]: Error in render: "TypeError: Cannot read property 'width' of undefined"

found in

---> <VData>
       <VDataTable>
         <VCard>
           <VueDataTable> at Content/js/vue/components/datatable/VueDataTable.vue
             <IvrList> at Content/js/vue/components/ivr/IVRList.vue
               <Root>

代码非常简单（我认为）

营养
导入“vuetify”；
导出默认值{
组件：{}，
数据（）{
返回{
搜索：“，
标题：[
{
正文：“甜点（100克食用）”，
对齐：“左”，
可排序：false，
值：“名称”
},
{文本：“卡路里”，值：“卡路里”}，
{文本：“Fat（g）”，值：“Fat”}，
{文本：“Carbs（g）”，值：“Carbs”}，
{文本：“蛋白质（g）”，值：“蛋白质”}，
{文本：“铁（%）”，值：“铁”}
],
甜点：[
{
名称：“冷冻酸奶”，
卡路里：159，
脂肪：6.0，
碳水化合物：24，
蛋白质：4.0，
铁：“1%。”
},
{
名称：“冰淇淋三明治”，
卡路里：237，
fat:9.0，
碳水化合物：37，
蛋白质：4.3，
铁：“1%。”
},
{
名称：“Eclair”，
卡路里：262，
脂肪：16.0，
碳水化合物：23，
蛋白质：6.0，
铁：“7%。”
},
{
名称：“纸杯蛋糕”，
卡路里：305，
脂肪：3.7，
碳水化合物：67，
蛋白质：4.3，
铁：“8%。”
},
{
名称：“姜饼”，
卡路里：356，
脂肪：16.0，
碳水化合物：49，
蛋白质：3.9，
铁：“16%。”
},
{
名称：“果冻豆”，
卡路里：375，
脂肪：0.0，
碳水化合物：94，
蛋白质：0.0，
铁：“0%。”
},
{
名称：“棒棒糖”，
卡路里：392，
脂肪：0.2，
碳水化合物：98，
蛋白质：0，
铁：“2%。”
},
{
名称：“蜂巢”，
卡路里：408，
fat:3.2，
碳水化合物：87，
蛋白质：6.5，
铁：“45%。”
},
{
名称：“甜甜圈”，
卡路里：452，
脂肪：25.0，
碳水化合物：51，
蛋白质：4.9，
铁：“22%。”
},
{
姓名：“KitKat”，
卡路里：518，
脂肪：26.0，
碳水化合物：65，
蛋白质：7，
铁：“6%。”
}
]
};
},
计算：{}，
创建（）{
//eslint禁用下一行无控制台
console.log（“创建VueTable”）；
},
挂载（）{}，
方法：{}
};
.flex-grow-1{
柔性生长：1；
}

我几乎是逐行从vuetify中复制的。为什么我会出现上述错误？这看起来很奇怪（而且很普通）。有什么想法吗

看起来这是一个尚未修复的已知错误：(

---

您是否可以尝试使用“vue add vuetify”命令来代替安装软件包，我通过这样做解决了类似的问题。

我通过将

vuetify:new vuetify（）

添加到：

const app = new Vue({
    vuetify: new Vuetify(),
    el: '#app',
    router: Routes,
    render: h => h(App),
});

---

阅读这里的更多内容：

当我把代码放在代码笔中时：它工作正常，没有错误。可能是您的示例周围有其他代码导致了问题吗？是的，这是一个很好的机会。您发布的示例周围的代码是什么？

<template>
  <v-card>
    <v-card-title>
      Nutrition
      <div class="flex-grow-1"></div>
      <v-text-field v-model="search" append-icon="search" label="Search" single-line hide-details></v-text-field>
    </v-card-title>
    <v-data-table :headers="headers" :items="desserts" :search="search"></v-data-table>
  </v-card>
</template>

<script>
import "vuetify";
export default {
  components: {},
  data() {
    return {
      search: "",
      headers: [
        {
          text: "Dessert (100g serving)",
          align: "left",
          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" }
      ],
      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%"
        }
      ]
    };
  },
  computed: {},
  created() {
    // eslint-disable-next-line no-console
    console.log("VueTable created");
  },
  mounted() {},
  methods: {}
};
</script>

<style scoped>
.flex-grow-1 {
  flex-grow: 1;
}
</style>

const app = new Vue({
    vuetify: new Vuetify(),
    el: '#app',
    router: Routes,
    render: h => h(App),
});