vue文件报错"TypeError: Cannot read property 'content' of undefined"

niusz
  • 372

我在写一个仿markdown的vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=" initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>notebook</title>
        <!-- Icons & Stylesheets -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!--add the marked library:-->
    <script src="https://unpkg.com/marked"></script>
</body>
    <!--Notebook app-->
    <div id="notebook">
        <!-- sidebar-->
        <aside class="side-bar">
            <!--Toolbar-->
            <div class="toolbar">
                <!-- Add note button -->
                <button :title="addButtonTitle" @click="addNote"><i class="material-icons">add</i>Add note</button>
            </div>
            <div class="notes">
                <!--Note list here-->
                <div class="note" v-for="note in notes" @click="selectNote(note)">{{ note.title }}</div>
            </div>
            
        </aside>
        <!--Main pane-->
        <section class="main">
            <textarea v-model="selectedNote.content"></textarea>
        </section>
        <aside class="preview" v-html="notePreview">
        </aside> 
    </div>
    <!--some javascript -->
    <script src="script.js"></script>
</html>
new Vue({
    // css selector of the root DOM element
    el: '#notebook',
    // some data
    data () {
        return {
           content: localStorage.getItem('content') || 'you can write in **markdown**', 
            // New! a note array
            notes: [],
            selectedId: localStorage.getItem('selected-id') || null,
        }
        
    },
    computed: {
        notePreview () {
            //markdown rendered to HTML
            return  this.selectedNote? marked(this.selectedNote.content):""
            // return  marked(this.content);
        },
        addButtonTitle () {
            return this.notes.length + "notes already"
        },
        selectedNote () {
            // we return the matching note with selectedId 
            return this.notes.find(note => note.id === this.selectedId) 
            //  this.selectedId = note.id
        },
    },
    watch: {
        // watching 'content' data property
        content:
                {
                  handler:'saveNote',
                  deep: true,
                 selectedId(val, oldVal) {
                 localStorage.setItem('selected-id', val)
        },
        },
    },
    
    methods: {
        // Add a note with some default content and select it 
        addNote () {
            const time = Date.now()
            // Default new note 
            const note = {
                id: String(time),
                title: 'New note' + (this.notes.length + 1),
                content: '**Hi!** This new note is using [markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) for formatting!',
                created: time,
                favorite: false,
            }
            // Add to this list 
            this.notes.push(note)
        },
        selectNote (note) {
            this.selectedId = note.id
        },
        saveNote() {
            localStorage.setItem('content',this.content)
        },
    
    }})
    

可是现在总是报错 TypeError: Cannot read property 'content' of undefined" 不知道哪里错了????

评论
阅读 10.6k
8 个回答

你代码中 写的是 <textarea v-model="selectedNote.content"></textarea> 即 content 这个变量的值,是定义在 seleectNote 这个对象中,那你要检查你这个对象中这个属性有没有值,或者有没有获取到值,如果没有值,或者没有动态获取到那你在使用它的时候就会报undefined

你自己检查一下,哪里用了xxx.content,xxx的值为undefined导致的报错

你看看在created声明周期打印content是不是undefined,我看你Content是不是依赖于本地存储啊

全局搜索下content,应该是在命名之前或是对象值,声明前没有该值定义导致的

应该是哪里没有赋值或者值为undefined然后通过.content引用到了content。

Bouncing
  • 2
新手上路,请多包涵

selectedNote方法默认创建页面时content为undefined,所以,textarea节点双向绑定数据时,找不到selecteNote.content,就会报错。改为下面这样,加个空值。
return this.notes.find(note => note.id === this.selectedId) || '';
或者,把section与aside标签套在<template>标签内,加条件 v-if="selectedNote"

船长
  • 1
新手上路,请多包涵

在输出内容部分加上判断语句,如果content为null就不显示

<section class="main" v-if="selectedNote">

<aside class="preview" v-if=selectedNote"  .....
zo8Hjc
  • 1
新手上路,请多包涵

可以呀 一个个的

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏