javascript - 从标记中选择并用作属性-vuejs

我试图从选择标记中获取属性，并在属性对象中使用。
这是我的html：

<div id="app">
    <h3>{{title}}</h3>
    <div class="form">
        <div class="form-group">
            <div class="form-group">
                <label>Note Title</label>
                <input class="form-control" type="text" v-model="note.title">
            </div>
            <div class="form-group">
                <label>Note text</label>
                <textarea class="form-control" v-model="note.text"></textarea>
            </div>
            <div class="form-group">
                <label>Cor</label>
                    <select v-model="note.cor">
                            <option disabled value="">Selecione a cor</option>
                            <option value="blue">Azul</option>
                            <option value="green">Verde</option>
                    </select>
                    <span>Cor Selecionada: {{ note.cor }}</span>
            </div>
            <button class="btn btn-primary" @click="addNote">Submit</button>
        </div>
        <div class="col-sm-12">
            <div class="col-sm-4" v-for="(note, index) in notes">
                <button class="close" @click="removeNote(index)">&times;</button>
                <div class="card-block">
                    <h4 class="card-title" v-bind:style="{ color: note.cor }">{{note.title}}</h4>
                    <h6 class="card-subtitle mb-2 text-muted">{{note.date}}</h6>
                    <p class="card-text">{{note.text}}</p>
                </div>
            </div>
        </div>
    </div>
</div>

这是Js：

var app = new Vue({
    el: '#app',
    data: {
        title: 'Notemaster',
        note: {
            title: '',
            text: '',
            cor: ''
        },
        notes: [
            {
                title: 'Visit Hawaii',
                text: 'just kiddind lol',
                date: new Date(Date.now()).toLocaleString(),
                cor:'blue'
            }
        ]
    },
    methods: {
        addNote() {
            let { text, title } = this.note
            this.notes.push({
                text,
                title,
                date: new Date(Date.now()).toLocaleString(),
                cor
            })
        },
        removeNote(index) {
            <!-- apaga o número de itens dispostos no segundo parametro-->
            this.notes.splice(index, 1)
        }
    }
});

select标签的值显示在<span>Cor Selecionada: {{ note.cor }}</span>处；
它可以显示<h4 class="card-title" v-bind:style="{ color: note.cor }">{{note.title}}</h4>标题的颜色
但是我无法创建新笔记。
显示的错误是未定义cor中的this.notes.push({ ... cor })。
提前致谢

最佳答案

该错误消息非常不言自明，在该范围内未定义cor。

也许您打算这样做：

let { text, title, cor } = this.note
                   ^^^

关于javascript - 从标记中选择并用作属性-vuejs，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47897570/