Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 2, Quotes

https://jsfiddle.net/NodToNothing/kac3o5hj/

Again, I made up my own A/C a bit.  The example called for separating the quote from the attribution, and I see how to do that, but I'm not going to.  I had more fun inserting a randomizer for Princess Bride quotes.  The top quote is random, but the bottom unordered list shows all the quotes in the Vue list so I could try a control loop.

HTML: <div id="app"> <!--one random item--> {{selectedItem}} <!--all possible items --> <ul id="example-2"> <li v-for="(item, index) in items"> {{ item.message }} </li> </ul> </div> Javascript + Vue 2.2.1 var app = new Vue({ el: '#app', components: { }, data: { items: [ { message: "\"Anybody want a peanut?\" - Fezzik"}, { message: "\"If there are, we all be dead.\" - Fezzik"}, { message: "\"He's really very short on charm.\" - Fezzik" }, { message: "\"Fuss, fuss… I think he like to scream at us.\" - Fezzik"}, {message: "\"Probably he means no harm.\" - Montoya"}, {message: "\"You have a great gift for rhyme.\" - Montoya "} ], selectedItem: '', }, created () { const idx = Math.floor(Math.random() * this.items.length); this.selectedItem = this.items[idx].message } })