3 ms·
> 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/ jquer
by iakov 6y ago
> 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.
I don't have a lot of experience with Vue, but I don't follow. You include Vue.js from CDN in a `script` tag, and then just add the `v-for` and `v-if` annotations to your HTML? How does Vue get the data, to properly iterate over it in `v-for` or check in `v-if`?
I'm really curious because I feel I'm missing some piece of puzzle here.
- unnameduser1 6y agoYou pass data into it as json. Or load it from external source as json
- iudqnolq 6y agoI think the idea is that the backend already iterates over the data and spits out for example a ul with a li per faq item. You edit the template the backend uses so that the vue annotations are also produced, which in theory is easier than changing the backend code. EDIT: Previous HTML outputted by for loop in backend template: <ul> <li> <h2>Question 1</h2> <p>Answer 1</p> </li> <li> <h2>Question 2</h2> <p>Answer 2</p> </li> </ul> New HTML outputted by for loop in backend template <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>