Question

我试图从select标签获取属性并在属性对象中使用。这是我的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 })未定义。提前致谢

Answer 1

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

也许你打算这样做：

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

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

1 个答案: