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

0
votes

I'm trying to push object to tags array after axios post but I get this error when push object.

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

What's this happening?

Sorry for my question being bad. I'm just a beginner yet.

It was working at first but I did something and it doesn't work.

I'm not calling 'text' for anything.

javascript/packs/index_vue.js

new Vue ({
    el: '#tags',
    methods: {
~~~~~~~~~~omit~~~~~~~~~~~
      addTag: function(){
        this.submitting = true;
        const newTag = {
          tag: {
            title: this.newTagTitle,
            status: 0,
            tasks: []
          }
        }
        axios.post('/api/tags', newTag)
          .then((res) => {
            console.log('just created a tag')
            this.tags.push(newTag);  //error occurring here
            this.newTagTitle = '';
            this.submitting = false;
            this.showNewTagForm = false;
          }).catch(error => {
            console.log(error);
          });
      ｝,
      addTask: function(tagId, i) { // added by edit
        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);
        });
      }
~~~~~~~~~~omit~~~~~~~~~~~
    },
    mounted: function () {
      axios.get('/api/tags')
      .then( res => {
        this.tags = res.data.tags,
        this.newTaskTextItems = res.data.newTaskTextItems,
        this.newTaskDeadlineItems = res.data.newTaskDeadlineItems,
        this.newTaskPriorityItems = res.data.newTaskPriorityItems,
        this.checkedItems = res.data.checkedItems
      })
    },
    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: ''
    }
~~~~~~~~~~omit~~~~~~~~~~~
})

views/tags/index.html.slim

.tags
  .tag v-for="(tag, i) in tags" :key="i"
    .tag-top
      .title
        h2 v-text="tag.title"
      .status.todo v-if="tag.status==0" v-on:click="openStatusForm(tag.id)" 未着手
      .status.going v-else-if="tag.status==1" v-on:click="openStatusForm(tag.id)" 進行中
      .status.done v-else-if="tag.status==2" v-on:click="openStatusForm(tag.id)" 完了
      .delete-button v-if="tag.status==0 || tag.status==1 || tag.status==2"
        button.delete.del-modal v-on:click="openDeleteConf(tag.id)" 削除
    .tag-content
      form.task-form
        .task-form-top
          input.text type="text" required="" name="text" placeholder="タスクを入力。" v-model="newTaskTextItems[i].text"
        .task-form-bottom
          .deadline-form
            p 締め切り
            input.deadline type="date" name="deadline" required="" v-model="newTaskDeadlineItems[i].deadline"
          .priority-form
            p 優先度
            v-select :options="options" v-model="newTaskPriorityItems[i].selected" label="name" :reduce="options => options.id" name="priority" placeholder="選択してください"
          .task-form-button
             button type="button" v-on:click="addTask(tag.id, i)" タスクを作成
      form.tasks
        .task v-for="(task, j) in tag.tasks" :key="j"
          .task-content :class="{ done: tag.tasks[j].checked }"
            .task-top
              .check
                input.checkbox_check type="checkbox" :value='task.id' v-model="tag.tasks[j].checked" :id="'task' + j"
              .task-title :class="{ checked: tag.tasks[j].checked }" v-text="task.text"
              .task-priority
                .task-priority-title 優先度：
                .task-priority-mark.low v-if="task.priority==1" 低
                .task-priority-mark.middle v-else-if="task.priority==2" 中
                .task-priority-mark.high v-else-if="task.priority==3" 高
      .task-bottom
              .deadline.tip v-if="task.limit<0" 締め切りを過ぎています
              .deadline.tip v-else-if="task.limit==0" 本日締め切り
              .deadline(v-else) あと{{ task.limit }}日
        .task-clear
          button type="button" v-on:click="clearTasks(tag.id)" タスクをクリア

※added by edit from here

routes.rb

Rails.application.routes.draw do

~~~~~~~~~~omit~~~~~~~~~~~

  namespace :api, format: 'json' do
    resources :tags, only: [:index, :destroy]
    post 'tags' => 'tags#create'
    post 'task/create' => 'tags#create_task'
    post 'task/clear' => 'tags#clear_tasks'
  end
end

controllers/api/tag_controller.rb

class Api::TagsController < ApplicationController
  protect_from_forgery
  skip_before_action :verify_authenticity_token

  def index
    @tag = Tag.new
    @tags = @tag.process
    @tasks = Task.all
  end

  def create
    @tag = Tag.new(tag_params)
    begin
      @tag.save!
    rescue ActiveRecord::RecordInvalid => exception
      puts exception
    end
  end
~~~~~~~~~~omit~~~~~~~~~~~
private

  def tag_params
    # <ActionController::Parameters {"title"=>"param確認テスト", "status"=>0} permitted: true>
    params.require(:tag).permit("title", "status")
  end
~~~~~~~~~~omit~~~~~~~~~~~
end

models/tag.rb

class Tag < ApplicationRecord
  has_many :tag_task_connections, dependent: :destroy
  validates :title, :status, presence: true

  def process
    tags = Tag.all
    tasks = Task.all
    tags_hash = []
    tags.each do |tag|
      tag_hash = tag.attributes
      tag_hash["tasks"] = []
      tag.tag_task_connections.each do |connection|
        task = tasks.find(connection.task_id).attributes
        task["limit"] = (task["deadline"] - Date.today).to_i
        task["checked"] = false
        tag_hash["tasks"] << task
      end
      tags_hash << tag_hash
    end
    return tags_hash
  end
end

views/api/tags/index.json.jbuilder

json.tags @tags
json.newTaskTextItems do
  json.array! @tags do |tag|
    json.text ''
  end
end
json.newTaskDeadlineItems do
  json.array! @tags do |tag|
    json.deadline ''
  end
end
json.newTaskPriorityItems do
  json.array! @tags do |tag|
    json.selected false
  end
end
json.checkedItems do
  json.array! @tasks do |task|
    json.checked false
  end
end

※added by edit from here.

I changed this code but same error occurs.

in index_vue.js

this.tags.push(newTag);

→this.tags.push('something');

※added by edit from here.

when this, no error. push() is wrong?

this.tags.push('something');

→console.log(this.tags) // this.tags.push('something');

※added by edit from here.

      addTag: function(){
~~~~~~~~~~omit~~~~~~~~~~~
        axios.post('/api/tags', newTag)
          .then((res) => {
            console.log(res) // here
            console.log('just created a tag')
            this.submitting = false;
            this.showNewTagForm = false;
            console.log(this.tags)
            // this.tags.push('something');
            this.newTagTitle = '';
            newTag.tag = {};
~~~~~~~~~~omit~~~~~~~~~~~

→result of console.log response of axios post enter image description here

/api/tags

※axios.get is getting this

{"tags":
[{"id":1,
"title":"雑務",
"status":9,
"created_at":"2020-09-05T02:46:06.031Z",
"updated_at":"2020-09-05T02:46:06.031Z",
"tasks":
[{"id":5,
"text":"家賃振り込み",
"deadline":"2020-09-03",
"priority":2,
"created_at":"2020-09-05T02:46:06.082Z",
"updated_at":"2020-09-05T02:46:06.082Z",
"limit":-8,
"checked":false},
{"id":38,
"text":"タスク作成テスト",
"deadline":"2020-09-10",
"priority":2,
"created_at":"2020-09-10T11:03:46.235Z",
"updated_at":"2020-09-10T11:03:46.235Z",
"limit":-1,
"checked":false}]},
{"id":23,
"title":"タグ削除テスト",
"status":0,
"created_at":"2020-09-10T09:13:03.977Z",
"updated_at":"2020-09-10T09:13:03.977Z",
"tasks":[]},
{"id":24,
"title":"タグ削除テスト２",
"status":0,
"created_at":"2020-09-10T09:15:01.551Z",
"updated_at":"2020-09-10T09:15:01.551Z",
"tasks":[]},
{"id":38,
"title":"create_tag_test",
"status":0,
"created_at":"2020-09-10T12:08:12.051Z",
"updated_at":"2020-09-10T12:08:12.051Z",
"tasks":[]},{"id":39,"title":"create_tag_test2","status":0,"created_at":"2020-09-10T12:08:44.929Z","updated_at":"2020-09-10T12:08:44.929Z","tasks":[]},
{"id":40,"title":"create_tag_test3","status":0,"created_at":"2020-09-10T12:10:42.491Z","updated_at":"2020-09-10T12:10:42.491Z","tasks":[]}],
"newTaskTextItems":[{"text":""},{"text":""},{"text":""},{"text":""},{"text":""},{"text":""},{"text":""},{"text":""},{"text":""},{"text":""},{"text":""},{"text":""},{"text":""},{"text":""},{"text":""},{"text":""},{"text":""},{"text":""},{"text":""}],
"newTaskDeadlineItems":[{"deadline":""},{"deadline":""},{"deadline":""},{"deadline":""},{"deadline":""},{"deadline":""},{"deadline":""},{"deadline":""},{"deadline":""},{"deadline":""},{"deadline":""},{"deadline":""},{"deadline":""},{"deadline":""},{"deadline":""},{"deadline":""},{"deadline":""},{"deadline":""},{"deadline":""}],
"newTaskPriorityItems":[{"selected":false},{"selected":false},{"selected":false},{"selected":false},{"selected":false},{"selected":false},{"selected":false},{"selected":false},{"selected":false},{"selected":false},{"selected":false},{"selected":false},{"selected":false},{"selected":false},{"selected":false},{"selected":false},{"selected":false},{"selected":false},{"selected":false}],
"checkedItems":[{"checked":false},{"checked":false}]}

server says

10:43:20 web.1     | Started POST "/api/tags" for ::1 at 2020-09-11 10:43:20 +0900
10:43:20 web.1     | Processing by Api::TagsController#create as JSON
10:43:20 web.1     |   Parameters: {"tag"=>{"title"=>"create_tag_test7", "status"=>0, "tasks"=>[]}}
10:43:20 web.1     | Unpermitted parameter: :tasks
10:43:20 web.1     |    (0.1ms)  begin transaction
10:43:20 web.1     |   ↳ app/controllers/api/tags_controller.rb:14:in `create'
10:43:20 web.1     |   Tag Create (0.9ms)  INSERT INTO "tags" ("title", "status", "created_at", "updated_at") VALUES (?, ?, ?, ?)  [["title", "create_tag_test7"], ["status", 0], ["created_at", "2020-09-11 01:43:20.356248"], ["updated_at", "2020-09-11 01:43:20.356248"]]
10:43:20 web.1     |   ↳ app/controllers/api/tags_controller.rb:14:in `create'
10:43:20 web.1     |    (7.3ms)  commit transaction
10:43:20 web.1     |   ↳ app/controllers/api/tags_controller.rb:14:in `create'
10:43:20 web.1     | No template found for Api::TagsController#create, rendering head :no_content
10:43:20 web.1     | Completed 204 No Content in 13ms (ActiveRecord: 8.2ms | Allocations: 2708)
2
javascriptruby-on-railsvue.jsslim
You should post your backend response to help us understand the problem – null
You are referencing newTaskTextItems as an array in the template but initialize it as a string in data – Michal Levý
@Charlie I added backend codes. If you need more, tell me. – Yohei Yokota
@MichalLevý I added code in methods. initialize newTaskTextItems in addTask method but it doesn't resolve the problem. – Yohei Yokota
@YoheiYokota we don't care about your backend code. We just care about the response you are getting from your backend – null

2 Answers

0
votes

Everywhere you declare text please try that:

 text: this.newTaskTextItems[i] ?  this.newTaskTextItems[i].text : ' ';

then you won't get any errors. And try to console.log(this.newTaskTextItems, this.newTaskTextItems[i], i), maybe some of them are undefined, but some are ok

0
votes

This is what I fixed.

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); //I got the error, because I hadn't been doing this.
      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;
    });
},