48 lines
1.3 KiB
Vue
48 lines
1.3 KiB
Vue
<template>
|
|
<div class="container">
|
|
<app-header :quoteCount="quotes.length" :maxQuotes="maxQuotes"></app-header>
|
|
<app-new-quote @newQuote="newQuote"></app-new-quote>
|
|
<hr>
|
|
<app-quote-grid :quotes="quotes" @quoteDelete="deleteQuote"></app-quote-grid>
|
|
<div class="row">
|
|
<div class="col-sm-12 text-center">
|
|
<div class="alert alert-info">click a quote to delete it.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import QuoteGrid from './components/QuoteGrid.vue'
|
|
import NewQuote from './components/NewQuote.vue'
|
|
import Header from './components/Header.vue'
|
|
|
|
export default {
|
|
data(){
|
|
return {
|
|
maxQuotes: 10,
|
|
quotes: ["Just a quote to see something"],
|
|
};
|
|
},
|
|
components: {
|
|
appQuoteGrid: QuoteGrid,
|
|
appHeader: Header,
|
|
appNewQuote: NewQuote,
|
|
},
|
|
methods: {
|
|
newQuote(quote) {
|
|
if (this.quotes.length >= this.maxQuotes){
|
|
return alert('Please delete quotes first');
|
|
}
|
|
this.quotes.push(quote)
|
|
},
|
|
deleteQuote(index){
|
|
this.quotes.splice(index, 1)
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|