push.()したら[Vue warn]: Error in render: "TypeError: Cannot read property 'text' of undefined"のエラーが出る。

Question

前提・実現したいこと

Ruby on Railsでタスク管理システムを作っています。
タグとタスクという概念があり、tag has many tasksという関係です。

axios.post()でタグを作成したあとに、vueで表示するdataのtagsの中にpostしたオブジェクトを追加しようとpush()を使って実装したのですが、これが次のようなエラーになってしまいます。

textは特に呼び出していないため、何がエラーになっているのかが不明です。

発生している問題・エラーメッセージ

[Vue warn]: Error in render: "TypeError: Cannot read property 'text' of undefined"

該当のソースコード

document.addEventListener('DOMContentLoaded', () => {
  new Vue ({
    el: '#tags',
    methods:{
~~~~~~~~~~~省略~~~~~~~~~~~
      addTag: function(){
        this.submitting = true;
        const newTag = {
          tag: {
            title: this.newTagTitle,
            status: 0,
            tasks: []
          }
        }
        axios.post('/api/tags', newTag)
          .then(() => {
            console.log('just created a tag')
            this.submitting = false;
            this.showNewTagForm = false;
            this.tags.push(newTag);  //ここでエラーが出ています。
            this.newTagTitle = '';
            newTag.tag.title = '';
          }).catch(error => {
            console.log(error);
          });
      }
    },
~~~~~~~~~~~省略~~~~~~~~~~~
    data: {
      tags: [],
      options: [
        { name: "低", id: 1 },
        { name: "中", id: 2 },
        { name: "高", id: 3 }
      ],
      showNewTagForm: false,
      showStatusFrom: false,
      changeStatusTag: 0,
      deleteConf: false,
      deleteTarget: 0,
      helloWorld: false,
      firstModal: true,
      newTagTitle: '',
      loading: false,
      submitting: false,
      newTaskTextItems: '',
      newTaskDeadlineItems: '',
      newTaskPriorityItems: ''
    }
  })
})

同じくmethods内にあるaddTask内でも同じような機能を実装していますが、これはエラーは出ず、ちゃんと期待通りの挙動になります。

      addTask: function(tagId, i) {
        const newTask = {
          task: {
            text: this.newTaskTextItems[i].text,
            deadline: this.newTaskDeadlineItems[i].deadline,
            priority: this.newTaskPriorityItems[i].selected
          },
          tag_task_connection: {
            tag_id: tagId
          }
        }
        axios.post('/api/task/create', newTask)
          .then(() => {
            console.log('just created a task')
            newTask.task.limit = Math.ceil((parseDate(this.newTaskDeadlineItems[i].deadline).getTime() - new Date().getTime())/(1000*60*60*24));
            this.tags[i].tasks.push(newTask.task);
            this.newTaskTextItems[i].text = '',
            this.newTaskDeadlineItems[i].deadline = '',
            this.newTaskPriorityItems[i].selected = '',
            newTask.tasks = '',
            newTask.tag_task_connection = ''
          }).catch(error => {
            console.log(error);
        });
      }

試したこと

• this.tags.push(newTag);をコメントアウト。

→エラーが消えます。

• this.tags.push(newTag);→this.tags.push('something')に変更する。

→同じエラーになります。

補足情報（FW/ツールのバージョンなど）

• vueのバージョン

$ npm list vue
project@0.1.0 /Users/me/Desktop/apps/project
├── UNMET DEPENDENCY vue@^2.6.12
└─┬ vue-turbolinks@2.1.0
└── UNMET DEPENDENCY vue@2.6.12

• rubyのバージョン

$ ruby -v
ruby 2.6.1p33 (2019-01-30 revision 66950) [x86_64-darwin19]

• railsのバージョン

$ bundle exec rails -v
Rails 6.0.3.2

• その他

↓ここにも同じ質問を投げてます。
https://stackoverflow.com/questions/63827677/vue-warn-error-in-render-typeerror-cannot-read-property-text-of-undefine

Answer 1

改修後のコードです。

addTag: function(){
  this.submitting = true;
  const newTag = {
    tag: {
      title: this.newTagTitle,
      status: 1,
      tasks: [],
      errors: {
        text: '',
        deadline: '',
        priority: ''
      }
    }
  }
  axios.post('/api/tags', newTag)
    .then(() => {
      console.log('just created a tag')
      this.submitting = false;
      this.showNewTagForm = false;
      this.newTagTitle = '';
      if (this.errors != '') {
        this.errors = ''
      }
      var newTaskTextItem = {text: ''};
      var newTaskDeadlineItem = {deadline: ''};
      var newTaskPriorityItem = {selected: 0};
      this.newTaskTextItems.push(newTaskTextItem); //これをやってなかったのが原因でした。
      this.newTaskDeadlineItems.push(newTaskDeadlineItem);
      this.newTaskPriorityItems.push(newTaskPriorityItem);
      this.tags.push(newTag.tag);
    }).catch(error => {
      if (error.response.data && error.response.data.errors) {
        this.errors = error.response.data.errors;
      }
      this.submitting = false;
      this.showNewTagForm = false;
    });
},

Answer 2

addTag: function(){
  this.submitting = true;
  const newTag = {
    tag: {
      title: this.newTagTitle,
      status: 1,
      tasks: [],
      errors: {
        text: '',
        deadline: '',
        priority: ''
      }
    }
  }
  axios.post('/api/tags', newTag)
    .then(() => {
      console.log('just created a tag')
      this.submitting = false;
      this.showNewTagForm = false;
      this.newTagTitle = '';
      if (this.errors != '') {
        this.errors = ''
      }
      var newTaskTextItem = {text: ''};
      var newTaskDeadlineItem = {deadline: ''};
      var newTaskPriorityItem = {selected: 0};
      this.newTaskTextItems.push(newTaskTextItem); //これをやってなかったのが原因でした。
      this.newTaskDeadlineItems.push(newTaskDeadlineItem);
      this.newTaskPriorityItems.push(newTaskPriorityItem);
      this.tags.push(newTag.tag);
    }).catch(error => {
      if (error.response.data && error.response.data.errors) {
        this.errors = error.response.data.errors;
      }
      this.submitting = false;
      this.showNewTagForm = false;
    });
},

Answer 3

解決しました。
pushした新しいtagがviewでnewTaskTextItems[i].textを呼んでいることが原因みたいです。
改修したらコードを載せます。

Answer 4

エラーの原因は関数の問題ではないと愚考します。

エラーをよく読んでください。

[Vue warn]: Error in render: "TypeError: Cannot read property 'text' of undefined"

Google翻訳にかけると

[Vue warn]：レンダリングエラー：「TypeError：未定義のプロパティ 'text'を読み取れません」

レンダリングエラーです。

レンダリングとは、何らかの抽象的なデータ集合を元に、一定の処理や演算を行って画像や映像、音声などを生成すること。

VueがDOMを描画する（レンダリング）時にエラーを起こしているのではないでしょうか？

例えばですけど、

のtags.length == 0とかtasks.length == 0 のときに
html側で{{tags[i].tasks[j].text}}とか呼び出してるのではないでしょうか？