amazing...
分かり辛い...[Vue warn]:Property or method "xxxx" is not defined on the instance but referenced during render.
このエラー、
⇧ 情報自体は多いのだけど、概ね、変数の初期化がされていないってことなんだけど、見事にハマった...。
■エラー出るパターン
<template> <div> <el-form :model="tableData[0]"> <el-form-item :prop="companyName"> <el-input v-model="tableData[0].companyName"></el-input> </el-form-item> <el-table :data="tableData"> <el-table-column :prop="name"> <template slot-scope="scope"> <el-form-item> <el-input v-model="scope.row.name"></el-input> </el-form-item> </template> </el-table-column> <el-table-column :prop="layer1"> <template slot-scope="scope"> <el-form-item> <el-input v-model="scope.row.layer1"></el-input> </el-form-item> </template> </el-table-column> <el-table-column :prop="layer2"> <template slot-scope="scope"> <el-form-item> <el-input v-model="scope.row.layer2"></el-input> </el-form-item> </template> </el-table-column> <el-table-column :prop="layer3"> <template slot-scope="scope"> <el-form-item> <el-input v-model="scope.row.layer3"></el-input> </el-form-item> </template> </el-table-column> </el-table> <el-form-item :prop="floor"> <el-input v-model="tableData[0].floor"></el-input> </el-form-item> </el-form> <el-button @click="save">保存</el-button> </div> </template> <script lang="ts"> /* eslint-disable no-console */ import { Component, Vue } from "vue-property-decorator"; @Component({ components: {}, }) export default class Table extends Vue { private tableData: any = []; created() { this.tableData.push({ id: "1", name: "Bob", layer1: "ビジネス事業本部", layer2: "ソリューション事業部", layer3: "開発課", companyName: "株式会社ハレ", floor: "2F", }); } private save() { console.log(this.tableData); } } </script>
■エラー出ないパターン
<template> <div> <el-form :model="tableData[0]"> <el-form-item :prop="companyName"> <el-input v-model="tableData[0].companyName"></el-input> </el-form-item> <el-table :data="tableData"> <el-table-column :prop="name"> <template slot-scope="scope"> <el-form-item> <el-input v-model="scope.row.name"></el-input> </el-form-item> </template> </el-table-column> <el-table-column :prop="layer1"> <template slot-scope="scope"> <el-form-item> <el-input v-model="scope.row.layer1"></el-input> </el-form-item> </template> </el-table-column> <el-table-column :prop="layer2"> <template slot-scope="scope"> <el-form-item> <el-input v-model="scope.row.layer2"></el-input> </el-form-item> </template> </el-table-column> <el-table-column :prop="layer3"> <template slot-scope="scope"> <el-form-item> <el-input v-model="scope.row.layer3"></el-input> </el-form-item> </template> </el-table-column> </el-table> <el-form-item :prop="floor"> <el-input v-model="tableData[0].floor"></el-input> </el-form-item> </el-form> <el-button @click="save">保存</el-button> </div> </template> <script lang="ts"> /* eslint-disable no-console */ import { Component, Vue } from "vue-property-decorator"; @Component({ components: {}, }) export default class Table extends Vue { private tableData: any = []; private id = ""; private name = ""; private layer1 = ""; private layer2 = ""; private layer3 = ""; private companyName = ""; private floor = ""; created() { this.tableData.push({ id: "1", name: "Bob", layer1: "ビジネス事業本部", layer2: "ソリューション事業部", layer3: "開発課", companyName: "株式会社ハレ", floor: "2F", }); } private save() { console.log(this.tableData); } } </script>
⇧ 配列にオブジェクトを格納する際に、オブジェクトのプロパティを初期化しておく必要があるらしい...う~む、これは分からんわ...
というか、オブジェクトのプロパティが100個ぐらいあったら100個すべて宣言しないといけないって地獄ですな...
Vue.js誠に使い辛い...
今回はこのへんで。