[Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'text'”

分类：编程问答

如何解决[Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'text'”

我试图在axios发布后将对象推送到标签数组，但是在推送对象时遇到此错误。

[Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'text'”

这是怎么回事？

很抱歉，我的问题不好。我还只是个初学者。

起初它在工作，但是我做了一些事情，但是没用。

我什么都不叫“文本”。

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响应结果 enter image description here

/ api /标签

※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","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":"タグ削除テスト２","created_at":"2020-09-10T09:15:01.551Z","updated_at":"2020-09-10T09:15:01.551Z","title":"create_tag_test","created_at":"2020-09-10T12:08:12.051Z","updated_at":"2020-09-10T12:08:12.051Z",{"id":39,"title":"create_tag_test2","created_at":"2020-09-10T12:08:44.929Z","updated_at":"2020-09-10T12:08:44.929Z",{"id":40,"title":"create_tag_test3","created_at":"2020-09-10T12:10:42.491Z","updated_at":"2020-09-10T12:10:42.491Z","tasks":[]}],"newTaskTextItems":[{"text":""},{"text":""},{"text":""}],"newTaskDeadlineItems":[{"deadline":""},{"deadline":""},{"deadline":""}],"newTaskPriorityItems":[{"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;
    });
},

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot