[Vue warn]: Error in callback for immediate watcher "data"를 해결하는 방법

얼마 전 Element UI를 건드렸을 때 문득 콘솔을 열어보면 아래 그림과 같은 오류가 나왔습니다. 동작 자체는 특히 문제가 될 것 같지 않았습니다.

Element UI
htps : ///에멘 t. 네. 이오 / # / 엔우 S

덧붙여서 사용하고 있던 것은, Element UI를 베이스로 한 Vue-admin-element였습니다.

Vue-admin-element
알지 못하는 분은 아래에서 놀 수 있으므로 봐주세요.
htps : // 팬지 아치. 기주 b. 이오 / ゔ 에- 에멘 t- d dmin / # / ぉ 긴? Ree ct = % 2F sh shore rd

원인을 넷상에서 찾는 것도 좀처럼 발견되지 않았습니다만 어떻게든 해외의 기사를 찾아 해결했습니다. 일본어 기사가 없었기 때문에 여기에 기재하기로 했습니다.

해결 방법

상황 재현

Element UI에서 찾은 테이블을 Vue-admin-element 내에서 정확히 아래와 같이 사용하려고 했을 때였습니다.

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all>
      <el-table-column
        prop="date"
        label="date"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        sortable
        width="180">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: null
      }
    }
  }
</script>

테이블내에 표시하는 데이터를 API로 취득하는 것을 상정하고 있었으므로, script 태그내의 변수 tableData를 선언할 필요가 있습니다만 (오마케 참조),

data() {
  return {
    tableData: null
  }
}

했습니다.
이 시점에서 콘솔을 살펴보면 위 이미지에 오류가 발생했을 것입니다.

해결 방법

tableData에 null 대신 빈 배열을 전달하면 오류가 훌륭하게 사라집니다.

data() {
  return {
    tableData: []
  }
}

원인 고찰

Vue-admin-element내의 테이블이라고 null로 동작하고 있었습니다만, Element UI 페이지로부터 이식한 파트에서는 ​​이러한 에러가 나왔다고 생각합니다.

default에서 변수를 선언할 때 변수에 저장되는 데이터의 형식이 배열이거나 객체인지 걱정할 필요가 있는 경우가 존재할지도 모릅니다.

주) 에러 해결 방법을 적어 준 원 사이트입니다만, 다시 찾을 수 없었기 때문에 링크를 붙일 수 없었습니다. 어떻게 거기에 도착했는지도 더 이상 기억할 수 없습니다.

오마케

data() {
  return {
  }
}

뭐라고 쓰면

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

화가납니다.