I am attempting to retrieve a value from a select tag and use it in an object property. Below is the HTML code:
<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>Color</label>
<select v-model="note.color">
<option disabled value="">Select a color</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<span>Selected Color: {{ note.color }}</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)">×</button>
<div class="card-block">
<h4 class="card-title" v-bind:style="{ color: note.color }">{{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>
Here is the JavaScript code:
var app = new Vue({
el: '#app',
data: {
title: 'Notemaster',
note: {
title: '',
text: '',
color: ''
},
notes: [
{
title: 'Visit Hawaii',
text: 'just kidding lol',
date: new Date(Date.now()).toLocaleString(),
color:'blue'
}
]
},
methods: {
addNote() {
let { text, title, color } = this.note
this.notes.push({
text,
title,
date: new Date(Date.now()).toLocaleString(),
color
})
},
removeNote(index) {
<!-- removes the selected number of items-->
this.notes.splice(index, 1)
}
}
});
The value of the select tag displays correctly at
<span>Selected Color: {{ note.color }}</span><h4 class="card-title" v-bind:style="{ color: note.color }">{{note.title}}</h4>color in this.notes.push({ ... color }) is not defined.
Thank you in advance