book page 27 code errer

AnsonZnl commented 5 years ago

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>NoteBook</title>
    <!-- <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="notebook">
        <!-- 主面板 -->
        <section class="main">
            <!-- 侧边栏 note list -->
            <aside class="side-bar">
                <div class="toolbar">
                    <button @click='addNote' :title="notes.length + ' note(s) already'"> + Add note</button>
                </div>
                <div class="note-list">
                    <div v-for="item in notes" @click="selectNote(item)">
                        <span>{{item.title}}</span>
                    </div>
                </div>
            </aside>
            <textarea class="inputView" v-model="selectedNote.content"></textarea>
            <aside class="preView" v-html="notePreview"></aside>
        </section>
    </div>
    <!-- <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> -->
    <script src="https://cdn.bootcss.com/vue/2.5.22/vue.js"></script>
    <script src="https://unpkg.com/marked"></script>
    <script>
        new Vue({
            el: '#notebook',
            data(){
                return {
                    content: selectedNote.content,
                    notes: [],
                    selectedId:''
                }
            },
            computed: {
                // 计算属性，当函数中的数值发生变化，可以返回一个新的值
                notePreview(){
                    return this.selectedNote ? marked(this.selectedNote.content) : '';
                    // MorkDown转为HTML ， marked('## title') --> <h2>title</h2>
                },
                selectedNote(){
                    return this.notes.find(item => item.id === this.selectedId);
                }
                // 上面的item是notes的每一项，然后遍历notes的每一项的id去判断是否 === this.selectedId
                // ES5 find()方法，接受一个规则函数，返回一个符合规则的元素，

            },
            // watch: {
                // 侦听改变 当数值发生变化时 返回被监听属性的新值与旧值
                // watch以键值对存在 把侦听属性的名字作为key,把侦听选项对象作为value
                // 必须有一个handler(newVal, oldVal);
                // content: {
                    // handler(newVal, oldVal){
                    //     console.log('save note:', newVal);
                    // }
                    // handler: 'saveNote'
                // }
            // },
            methods: {
                // saveNote(newVal){
                //     // console.log('save note:', newVal);
                //     localStorage.setItem('content', newVal);
                // },
                addNote(){
                    const time = Date.now();//1970到现在的毫秒数 Type is Number
                    const note = {
                        id: String(time),
                        title: 'New note' + (this.notes.length + 1),
                        content: '**Hi**',
                        created: time,
                        favorite: false
                    }
                    this.notes.push(note);
                    // console.log(this.notes);
                },
                selectNote(item){
                    this.selectedId = item.id;
                    console.log(this.selectedId,this.selectedNote);
                }
            }
        })
    </script>
</body>
</html>

AnsonZnl commented 5 years ago

value computed.content error

milyyy commented 5 years ago

碰到同样的问题，请问解决了吗

AnsonZnl commented 5 years ago

碰到同样的问题，请问解决了吗

抱歉，才看到，已经解决，我忘记了怎么解决的了。
但是原因我还记得，是因为computed.content在未赋值时加载导致的错误。
你可以参考我的代码来排查错误：https://github.com/AnsonZnl/Vue.js2-Web-Development-Projects
希望对你有所帮助

milyyy commented 5 years ago

好的，十分感谢。

	mily

milysong@163.com | 签名由网易邮箱大师定制

On 05/10/2019 10:31，张宁乐notifications@github.com wrote：

碰到同样的问题，请问解决了吗

抱歉，才看到，已经解决，但是忘记了怎么解决方法了。但是原因我还记得，是因为computed.content在未赋值时加载导致的错误。

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

Akryum / packt-vue-project-guide

book page 27 code errer #8