Vue 속성 정의 주의(인스턴스

Vue 속성 정의 주의(인스턴스

편집 - 이 에러를 확인하고 싶은 사람이 있는 경우는, 여기서 에러 코드를 사용해 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 데이터 개체에 속성이 정의되지 않았기 때문에 발생합니다.이 경우 유감스럽지만 나는 정말로 추가했다.columns그리고.items새로운 Vue 콜에 접속합니다.왜 이 오류가 발생하는지 아십니까?템플릿에서 데이터를 전혀 사용할 수 없는 것 같습니다.

이 프로젝트는 최신 Vue-CLI에서 생성되었으며runtimeCompiler: true에 깃발을 올리다vue.config.js파일(file)을 클릭합니다.

그.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>

App.vue 컴포넌트 내에 Vue를 재설치하지 마십시오.
다음과 같이 수정합니다(보고서의 파일):

main.filename:

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>

언급URL : https://stackoverflow.com/questions/55045375/vue-property-definition-warning-even-though-it-is-defined-on-the-instance