Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 2, Mad Lib (4) - Vue.js style

I thought a madlib lended itself more appropriately to Python, but perhaps that's because I grew up in the age of Zork and Leather Goddess of Phobos.  It works just fine with Vue, although the branching it's asking for next might be a challenge.  I haven't really tried control statements with Vue.  Wait, that's not true - I used the for/next in the random quote example.

I might actually have to put a little thought into the structure for that one.  I'm not sure what "branching" means in that context.  Select one of two verbs at random, and then use the other one later?  Allow them to only select from a few options and branch depending on the one they select?  That second one makes more sense if I'm not going to implement some NLP weirdness.  I haven't used a dropdown in Vue, so that will be a good challenge.


The code....I wonder how long until these start exceeding my textarea and I'll have to actually change the tag attributes.

HTML <div id="app"> Noun: <input ref="input" type="text" v-model="noun"><BR/> Adverb: <input ref="input" type="text" v-model="adverb"><BR/> Adjective: <input ref="input" type="text" v-model="adjective"><BR/> Verb: <input ref="input" type="text" v-model="verb"><BR/> {{sentence}} </div> Javascript + Vue 2.2.1 var app = new Vue({ el: '#app', components: { }, data: { noun: "dog", adverb: "quickly", verb: "walk", adjective: "blue" }, computed:{ sentence: function(){ return "Do you " + this.verb + " your " + this.adjective + " " + this.noun + " " + this.adverb + "? That's hilarious!"; }} })