[Vue 警告]:渲染时出错:“TypeError:无法读取未定义的属性‘text’”
我试图在 axios 发布后将对象推送到标签数组,但在推送对象时出现此错误。
[Vue warn]: Error in render: "TypeError: Cannot read property 'text' of undefined"
这是怎么回事?
抱歉,我的问题不好。我还只是个初学者。
起初它可以工作,但我做了一些事情,它不起作用。
我没有为任何东西调用“文本”。
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)" タスクをクリア
※由编辑添加这里
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
※由此处编辑添加。
我更改了此代码,但出现了同样的错误。
在index_vue.js中
this.tags.push(newTag);
→
this.tags.push('something');
※由此处编辑添加。
此时,没有错误。 push() 错误?
this.tags.push('something');
→
console.log(this.tags)
// this.tags.push('something');
※由此处编辑添加。
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~~~~~~~~~~~
→axios 帖子的 console.log 响应结果 在此处输入图片描述
/api/tags
※axios.get 正在获取此
{"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":"タグ削除テスト2",
"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}]}
服务器说
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)
请在声明文本的任何地方尝试:
text: this.newTaskTextItems[i] ? this.newTaskTextItems[i].text : ' ';
这样您就不会收到任何错误。然后尝试 console.log(this.newTaskTextItems, this.newTaskTextItems[i], i),也许其中一些未定义,但有些没问题
这是我修复的。
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;
});
},