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

【问题标题】：Vue property definition warning even though it is defined on the instanceVue 属性定义警告，即使它是在实例上定义的
【发布时间】：2019-03-07 22:41:53
【问题描述】：

编辑 - 如果有人想将其拉下来并亲自查看错误，我已经在 github 上设置了一个带有错误代码的 repo：https://github.com/andrewjrhill/what-the-instance-grid。您可以运行npm run serve 来启动网络服务器。

我遇到了一个问题，我的 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 调用中添加了 columns 和 items。任何想法为什么我会收到此错误？模板似乎根本没有数据。

这个项目是由最新的 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>

【问题讨论】：

你在 data 函数中有一个 prop (:columns="columns") 和一个 columns。这些会冲突；选择其中一个。
@ceejoyoz :columns 是 Grid vue 组件上的一个道具。为什么这会与 vue 实例数据中定义的“列”冲突？一个在组件上，一个在 vue 实例上。

标签： javascript vue.js vuejs2 kendo-grid vue-cli-3

【解决方案1】：

不要在 App.vue 组件中重新实例化 Vue。
像这样修复（来自您的仓库的文件）：

main.js:

import App from './App.vue'
import Vue from 'vue'
import { Grid } from "@progress/kendo-vue-grid";

Vue.component("Grid", Grid);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#vueapp')

App.vue:

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

<script>
  export default {
    name: "App",
    data: function() {
      return {
        items: [],
        columns: [
          { field: "ProductID" },
          { field: "ProductName", title: "Product Name" },
          { field: "UnitPrice", title: "Unit Price" }
        ]
      };
    },
    methods: {
      createRandomData(count) {
        // your code
      }
    },
    mounted() {
      this.items = this.createRandomData(50);
    }
  };
</script>

【讨论】：