Javascript Vue属性定义警告，即使它是在实例上定义的

编辑-我在github上设置了一个回购协议，如果有人想把它拉下来，自己看看错误，我会在这里使用错误代码：。您可以运行

npm run serve

启动Web服务器

---

我遇到一个问题，我的Vue抛出以下错误：

[Vue warn]: Property or method "columns" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
[Vue warn]: Property or method "items" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

这是Vue应用程序中非常常见的问题，通常是Vue数据对象上未定义属性的结果。不幸的是，在这种情况下，我确实在新的Vue调用中添加了

列

和

项

。你知道我为什么会犯这个错误吗？看起来数据对模板根本不可用

此项目由最新的Vue CLI生成，并在

Vue.config.js

文件中使用

runtimeCompiler:true

标志（如果有任何区别）

有问题的

.vue

文件：

<template>
  <div id="vueapp" class="vue-app">
    <Grid :columns="columns" :data-items="items" :style="{ height: '280px' }"></Grid>
  </div>
</template>

<script>
import Vue from "vue";

import { Grid } from "@progress/kendo-vue-grid";

Vue.component("Grid", Grid);

new Vue({
  el: "#vueapp",
  data: function() {
    return {
      items: [],
      columns: [
        { field: "ProductID" },
        { field: "ProductName", title: "Product Name" },
        { field: "UnitPrice", title: "Unit Price" }
      ]
    };
  },
  methods: {
    createRandomData(count) {
      const productNames = [
        "Chai",
        "Chang",
        "Syrup",
        "Apple",
        "Orange",
        "Banana",
        "Lemon",
        "Pineapple",
        "Tea",
        "Milk"
      ];
      const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];

      return Array(count)
        .fill({})
        .map((_, idx) => ({
          ProductID: idx + 1,
          ProductName:
            productNames[Math.floor(Math.random() * productNames.length)],
          UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)]
        }));
    }
  },
  mounted() {
    this.items = this.createRandomData(50);
  }
});

export default {
  name: "App",
  components: {
    Grid
  }
};
</script>

从“Vue”导入Vue；
从“@progress/kendo vue Grid”导入{Grid}”；
Vue.组件（“网格”，网格）；
新Vue({
el:“vueapp”，
数据：函数（）{
返回{
项目：[]，
栏目：[
{字段：“ProductID”}，
{字段：“产品名称”，标题：“产品名称”}，
{字段：“单价”，标题：“单价”}
]
};
},
方法：{
createRandomData（计数）{
const productNames=[
“柴”，
“张”，
“糖浆”，
“苹果”，
“橙色”，
“香蕉”，
“柠檬”，
“菠萝”，
“茶”，
“牛奶”
];
常数单价=[12.5,10.1,5.3,7,22.53,16.22,20,50,100,120]；
返回数组（计数）
.fill（{}）
.map（（x，idx）=>({
ProductID:idx+1，
产品名称：
产品名称[Math.floor（Math.random（）*productNames.length）]，
单价：单价[Math.floor（Math.random（）*unitPrices.length）]
}));
}
},
安装的（）{
this.items=this.createRandomData（50）；
}
});
导出默认值{
名称：“应用程序”，
组成部分：{
网格
}
};

不要在App.Vue组件中重新启动Vue。
像这样修复（来自回购协议的文件）：

main.js：

从“./App.vue”导入应用程序
从“Vue”导入Vue
从“@progress/kendo vue Grid”导入{Grid}”；
Vue.组件（“网格”，网格）；
Vue.config.productionTip=false
新Vue({
渲染：h=>h（应用程序），
}).$mount（“#vuepp”）

App.vue：

导出默认值{
名称：“应用程序”，
数据：函数（）{
返回{
项目：[]，
栏目：[
{字段：“ProductID”}，
{字段：“产品名称”，标题：“产品名称”}，
{字段：“单价”，标题：“单价”}
]
};
},
方法：{
createRandomData（计数）{
//你的代码
}
},
安装的（）{
this.items=this.createRandomData（50）；
}
};

您在

数据

函数中既有一个道具（

：columns=“columns”

）又有一个

列

。这些将相互冲突；选择一个或另一个。@ceejoyoz

：columns

是网格vue组件上的一个道具。为什么会与vue实例数据中定义的“列”冲突？一个在组件上，一个在vue实例上。