※当サイトの記事には、広告・プロモーションが含まれます。

...[Vue warn]:Property or method "xxxx" is not defined on the instance but referenced during render.

nazology.net

amazing...

分かり辛い...[Vue warn]:Property or method "xxxx" is not defined on the instance but referenced during render.

このエラー、

qiita.com

prograshi.com

blog.mitsuto.com

⇧ 情報自体は多いのだけど、概ね、変数の初期化がされていないってことなんだけど、見事にハマった...。

■エラー出るパターン

<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誠に使い辛い...

今回はこのへんで。