Hacker News Reader

In vue, you don't even touch the data, you just sprinkle an attribute on the existing html to augment functionality much like you'd do unobtrusive js w/ jquery.

The approach you mentioned sort of works but a) it does require refactoring backend code (which by itself may already be a non-starter depending on whether you're dealing w/ a "old guard" backend tech lead, for example) b) it opens up potential security holes if implemented as you describe, c) you might lose SEO visibility and/or fail more catastrophically (i.e. a js exception might blank out the page entirely, vs merely breaking toggling), etc.

A more nitpicky code reviewer might also question the usage of babel off of a CDN if you went with a no-build JSX approach, the usage of window, etc.

By comparison, the vue snippet would be trivial, "production worthy" and it handles all the things above correctly.

View on HN

<ul> <li> <h2> <button v-on:click="expanded = 1"> Question 1 </button> </h2> <p v-if="expanded === 1">Answer 1</p> </li> <li> <h2> <button v-on:click="expanded = 2"> Question 2 </button> </h2> <p v-if="expanded === 2">Answer 2</p> </li> </ul>